<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Web Animations Level 2</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="UD" name="w3c-status">
  <meta content="This specification defines a model for synchronization and      timing of changes to the presentation of a Web page.      This specification also defines an application programming interface      for interacting with this model and it is expected that further      specifications will define declarative means for exposing these      features." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-UD" rel="stylesheet" type="text/css">
  <link href="https://drafts.csswg.org/web-animations-2/" rel="canonical">
<style>
.constructors::before, .members::before {
  font: bold 100% sans-serif;
  text-align: left;
  margin: 1.33em 0px;
  color: #005A9C;
}

.constructors::before { content: 'Constructors' }
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Web Animations Level 2</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Unofficial Proposal Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.csswg.org/web-animations-2/">https://drafts.csswg.org/web-animations-2/</a>
     <dt>Version History:
     <dd><a href="https://github.com/w3c/csswg-drafts/commits/master/web-animations-1">https://github.com/w3c/csswg-drafts/commits/master/web-animations-1</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="43194"><a class="p-name fn u-email email" href="mailto:bbirtles@mozilla.com">Brian Birtles</a> (<span class="p-org org">Mozilla</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="47691"><a class="p-name fn u-email email" href="mailto:shans@google.com">Shane Stephens</a> (<span class="p-org org">Google Inc</span>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:dstockwell@google.com">Douglas Stockwell</a> (<span class="p-org org">Google Inc</span>)
     <dt>Suggest an Edit for this Spec:
     <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/web-animations/Overview.bs">GitHub Editor</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/csswg-drafts/labels/web-animations">GitHub Issues</a>
     <dd><a href="https://github.com/w3c/csswg-drafts/labels/web-animations-2">GitHub</a>
     <dd>
     <dt>Participate:
     <dd><a href="https://github.com/w3c/csswg-drafts/tree/master/web-animations-2">Fix the text through GitHub</a>
     <dd>Join the ‘waapi’ channel on the <a href="https://damp-lake-50659.herokuapp.com/">Animation at Work</a> slack
     <dd>IRC: <a href="ircs://irc.w3.org:6667/webanimations">#webanimations</a> on W3C’s IRC
    </dl>
   </div>
   <div data-fill-with="warning">
    <details class="annoying-warning" open>
     <summary>Not Ready For Implementation</summary>
     <p> This spec is not yet ready for implementation.
		It exists in this repository to record the ideas and promote discussion. </p>
     <p> Before attempting to implement this spec,
		please contact the CSSWG at www-style@w3.org. </p>
    </details>
   </div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification defines a model for synchronization and

    timing of changes to the presentation of a Web page.
    This specification also defines an application programming interface
    for interacting with this model and it is expected that further
    specifications will define declarative means for exposing these
    features.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#delta"><span class="secno">1</span> <span class="content">Delta specification</span></a>
    <li><a href="#changes-since-level-1"><span class="secno">2</span> <span class="content">Changes since level 1</span></a>
    <li>
     <a href="#timing-model"><span class="secno">3</span> <span class="content">Timing model</span></a>
     <ol class="toc">
      <li>
       <a href="#timing-model-overview"><span class="secno">3.1</span> <span class="content">Timing model overview</span></a>
       <ol class="toc">
        <li><a href="#hierarchical"><span class="secno">3.1.1</span> <span class="content">Hierarchical</span></a>
       </ol>
      <li>
       <a href="#animations"><span class="secno">3.2</span> <span class="content">Animations</span></a>
       <ol class="toc">
        <li><a href="#setting-the-timeline"><span class="secno">3.2.1</span> <span class="content">Setting the timeline of an animation</span></a>
        <li><a href="#setting-the-target-effect"><span class="secno">3.2.2</span> <span class="content">Setting the target effect of an
  animation</span></a>
        <li><a href="#waiting-for-the-target-effect"><span class="secno">3.2.3</span> <span class="content">Waiting for the target effect</span></a>
        <li><a href="#playing-an-animation-section"><span class="secno">3.2.4</span> <span class="content">Playing an animation</span></a>
        <li><a href="#pausing-an-animation-section"><span class="secno">3.2.5</span> <span class="content">Pausing an animation</span></a>
        <li><a href="#canceling-an-animation-section"><span class="secno">3.2.6</span> <span class="content">Canceling an animation</span></a>
        <li><a href="#speed-control"><span class="secno">3.2.7</span> <span class="content">Speed control</span></a>
       </ol>
      <li>
       <a href="#animation-effects"><span class="secno">3.3</span> <span class="content">Animation effects</span></a>
       <ol class="toc">
        <li><a href="#types-of-animation-effects"><span class="secno">3.3.1</span> <span class="content">Types of animation effects</span></a>
        <li><a href="#the-active-interval"><span class="secno">3.3.2</span> <span class="content">The active interval</span></a>
        <li><a href="#local-time-and-inherited-time"><span class="secno">3.3.3</span> <span class="content">Local time and inherited time</span></a>
        <li><a href="#animation-effect-phases-and-states"><span class="secno">3.3.4</span> <span class="content">Animation effect phases and
states</span></a>
        <li><a href="#fill-modes"><span class="secno">3.3.5</span> <span class="content">Fill modes</span></a>
       </ol>
      <li>
       <a href="#repeating"><span class="secno">3.4</span> <span class="content">Repeating</span></a>
       <ol class="toc">
        <li><a href="#iteration-intervals"><span class="secno">3.4.1</span> <span class="content">Iteration intervals</span></a>
        <li><a href="#iteration-time-space"><span class="secno">3.4.2</span> <span class="content">Iteration time space</span></a>
        <li><a href="#interval-timing"><span class="secno">3.4.3</span> <span class="content">Interval timing</span></a>
       </ol>
      <li><a href="#animation-effect-speed-control"><span class="secno">3.5</span> <span class="content">Animation effect speed control</span></a>
      <li>
       <a href="#core-animation-effect-calculations"><span class="secno">3.6</span> <span class="content">Core animation effect
calculations</span></a>
       <ol class="toc">
        <li><a href="#animation-effect-calculations-overview"><span class="secno">3.6.1</span> <span class="content">Overview</span></a>
        <li><a href="#calculating-the-active-duration"><span class="secno">3.6.2</span> <span class="content">Calculating the active duration</span></a>
        <li>
         <a href="#transforming-the-local-time"><span class="secno">3.6.3</span> <span class="content">Transforming the local time</span></a>
         <ol class="toc">
          <li><a href="#calculating-the-active-time"><span class="secno">3.6.3.1</span> <span class="content">Calculating the active time</span></a>
          <li><a href="#calculating-the-overall-progress"><span class="secno">3.6.3.2</span> <span class="content">Calculating the overall progress</span></a>
         </ol>
       </ol>
      <li>
       <a href="#time-transformations"><span class="secno">3.7</span> <span class="content">Time transformations</span></a>
       <ol class="toc">
        <li><a href="#calculating-the-transformed-progress"><span class="secno">3.7.1</span> <span class="content">Calculating the transformed progress</span></a>
        <li><a href="#calculating-the-transformed-time"><span class="secno">3.7.2</span> <span class="content">Calculating the transformed time</span></a>
       </ol>
      <li>
       <a href="#grouping-and-synchronization"><span class="secno">3.8</span> <span class="content">Grouping and synchronization</span></a>
       <ol class="toc">
        <li><a href="#relationship-of-group-time-to-child-time"><span class="secno">3.8.1</span> <span class="content">Relationship of group time to child time</span></a>
        <li><a href="#the-start-time-of-children-of-a-group-effect"><span class="secno">3.8.2</span> <span class="content">The start time of
  children of a group effect</span></a>
        <li><a href="#the-intrinsic-iteration-duration-of-a-group-effect"><span class="secno">3.8.3</span> <span class="content">The intrinsic
  iteration duration of a group effect</span></a>
        <li>
         <a href="#sequence-effects"><span class="secno">3.8.4</span> <span class="content">Sequence effects</span></a>
         <ol class="toc">
          <li><a href="#the-start-time-of-children-of-a-sequence-effect"><span class="secno">3.8.4.1</span> <span class="content">The start time of
  children of a sequence effect</span></a>
          <li><a href="#the-intrinsic-iteration-duration-of-a-sequence-effect"><span class="secno">3.8.4.2</span> <span class="content">The intrinsic
  iteration duration of a sequence effect</span></a>
         </ol>
       </ol>
     </ol>
    <li>
     <a href="#animation-model"><span class="secno">4</span> <span class="content">Animation model</span></a>
     <ol class="toc">
      <li>
       <a href="#animation-types"><span class="secno">4.1</span> <span class="content">Animation types</span></a>
       <ol class="toc">
        <li><a href="#not-animatable-section"><span class="secno">4.1.1</span> <span class="content">Not animatable</span></a>
       </ol>
      <li>
       <a href="#keyframe-effects"><span class="secno">4.2</span> <span class="content">Keyframe Effects</span></a>
       <ol class="toc">
        <li><a href="#the-effect-value-of-a-keyframe-animation-effect"><span class="secno">4.2.1</span> <span class="content">The effect value of a keyframe effect</span></a>
       </ol>
      <li>
       <a href="#combining-effects"><span class="secno">4.3</span> <span class="content">Combining effects</span></a>
       <ol class="toc">
        <li><a href="#the-effect-stack"><span class="secno">4.3.1</span> <span class="content">The effect stack</span></a>
       </ol>
      <li><a href="#effect-accumulation-section"><span class="secno">4.4</span> <span class="content">Effect accumulation</span></a>
      <li>
       <a href="#custom-effects"><span class="secno">4.5</span> <span class="content">Custom effects</span></a>
       <ol class="toc">
        <li><a href="#updating-custom-effects"><span class="secno">4.5.1</span> <span class="content">Sampling custom effects</span></a>
        <li><a href="#execution-order-of-custom-effects"><span class="secno">4.5.2</span> <span class="content">Execution order of custom effects</span></a>
       </ol>
     </ol>
    <li>
     <a href="#programming-interface"><span class="secno">5</span> <span class="content">Programming interface</span></a>
     <ol class="toc">
      <li><a href="#the-animationtimeline-interface"><span class="secno">5.1</span> <span class="content">The <code>AnimationTimeline</code> interface</span></a>
      <li><a href="#the-animation-interface"><span class="secno">5.2</span> <span class="content">The <code>Animation</code> interface</span></a>
      <li><a href="#the-animationeffectreadonly-interface"><span class="secno">5.3</span> <span class="content">The <code>AnimationEffectReadOnly</code> interface</span></a>
      <li><a href="#the-animationeffecttimingreadonly-interface"><span class="secno">5.4</span> <span class="content">The <code>AnimationEffectTimingReadOnly</code> interface</span></a>
      <li><a href="#the-animationeffecttiming-interface"><span class="secno">5.5</span> <span class="content">The <code>AnimationEffectTiming</code> interface</span></a>
      <li><a href="#the-animationeffecttimingproperties-dictionary"><span class="secno">5.6</span> <span class="content">The <code>AnimationEffectTimingProperties</code> dictionary</span></a>
      <li>
       <a href="#the-computedtimingproperties-dictionary"><span class="secno">5.7</span> <span class="content">The <code>ComputedTimingProperties</code> dictionary</span></a>
       <ol class="toc">
        <li><a href="#the-fillmode-enumeration"><span class="secno">5.7.1</span> <span class="content">The <code>FillMode</code> enumeration</span></a>
       </ol>
      <li>
       <a href="#the-animationgroup-interfaces"><span class="secno">5.8</span> <span class="content">The <code>GroupEffectReadOnly</code> and <code>GroupEffect</code> interfaces</span></a>
       <ol class="toc">
        <li><a href="#processing-a-timing-argument"><span class="secno">5.8.1</span> <span class="content">Processing a <code>timing</code> argument</span></a>
        <li><a href="#definitions-for-manipulating-hierarchies"><span class="secno">5.8.2</span> <span class="content">Definitions for manipulating hierarchies</span></a>
       </ol>
      <li><a href="#the-animationnodelist-interface"><span class="secno">5.9</span> <span class="content">The <code>AnimationNodeList</code> interface</span></a>
      <li><a href="#the-animationsequence-interfaces"><span class="secno">5.10</span> <span class="content">The <code>SequenceEffectReadOnly</code> and <code>SequenceEffect</code> interfaces</span></a>
      <li>
       <a href="#the-keyframeeffect-interfaces"><span class="secno">5.11</span> <span class="content">The <code>KeyframeEffectReadOnly</code> and <code>KeyframeEffect</code> interfaces</span></a>
       <ol class="toc">
        <li><a href="#creating-a-new-keyframeeffect-object"><span class="secno">5.11.1</span> <span class="content">Creating a new <code>KeyframeEffect</code> object</span></a>
        <li><a href="#the-keyframeeffectoptions-dictionary"><span class="secno">5.11.2</span> <span class="content">The KeyframeEffectOptions dictionary</span></a>
       </ol>
      <li><a href="#the-iterationcompositeoperation-enumeration"><span class="secno">5.12</span> <span class="content">The IterationCompositeOperation enumeration</span></a>
      <li><a href="#the-effectcallback-callback-function"><span class="secno">5.13</span> <span class="content">The <code>EffectCallback</code> callback function</span></a>
      <li><a href="#the-animatable-interface"><span class="secno">5.14</span> <span class="content">The <code>Animatable</code> interface</span></a>
      <li><a href="#model-liveness"><span class="secno">5.15</span> <span class="content">Model liveness</span></a>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="delta"><span class="secno">1. </span><span class="content">Delta specification</span><a class="self-link" href="#delta"></a></h2>
   <p>This is a delta specification, meaning that it currently contains
only the differences from Web Animations Level 1 <a data-link-type="biblio" href="#biblio-web-animations-1">[WEB-ANIMATIONS-1]</a>.
Once the Level 1 specification is closer to complete, it will be merged
with the additions here into a complete level 2 specification.</p>
   <h2 class="heading settled" data-level="2" id="changes-since-level-1"><span class="secno">2. </span><span class="content">Changes since level 1</span><a class="self-link" href="#changes-since-level-1"></a></h2>
   <p>This specification introduces the following changes compared to the
previous level of this specification:</p>
   <ul>
    <li data-md>
     <p><a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect">group effects</a> and <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect">sequence effects</a>,</p>
    <li data-md>
     <p>an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect">animation effect</a>-specific <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate">playback rate</a>,</p>
    <li data-md>
     <p><a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect">custom effects</a>.</p>
   </ul>
   <h2 class="heading settled" data-level="3" id="timing-model"><span class="secno">3. </span><span class="content">Timing model</span><a class="self-link" href="#timing-model"></a></h2>
   <p>This section describes and defines the behavior of the Web Animations
timing model.</p>
   <h3 class="heading settled" data-level="3.1" id="timing-model-overview"><span class="secno">3.1. </span><span class="content">Timing model overview</span><a class="self-link" href="#timing-model-overview"></a></h3>
   <div class="informative-bg">
    <p><em>This section is non-normative</em></p>
    <h4 class="heading settled" data-level="3.1.1" id="hierarchical"><span class="secno">3.1.1. </span><span class="content">Hierarchical</span><a class="self-link" href="#hierarchical"></a></h4>
    <p>This level of the specification includes an updated timing hierarchy diagram.</p>
    <figure>
      <img alt="A hierarchy of timing nodes" src="img/time-hierarchy.svg" width="600"> 
     <figcaption> A hierarchy of timing nodes.
    Each node in the tree derives its time from its parent node. </figcaption>
    </figure>
    <p>Along with the following updated description:</p>
    <blockquote>
     <p>A consequence of this hierarchical arrangement is that complex
  animation arrangements can be reversed, scheduled, accelerated and so
  on as a whole unit since the manipulations applied to the parent,
  cascade down to its <a data-link-type="dfn" href="#descendant" id="ref-for-descendant">descendants</a>.
  Furthermore, since time has a common source, it is easy to synchronize
  animations.</p>
    </blockquote>
   </div>
   <h3 class="heading settled" data-level="3.2" id="animations"><span class="secno">3.2. </span><span class="content">Animations</span><a class="self-link" href="#animations"></a></h3>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <h4 class="heading settled" data-level="3.2.1" id="setting-the-timeline"><span class="secno">3.2.1. </span><span class="content">Setting the timeline of an animation</span><a class="self-link" href="#setting-the-timeline"></a></h4>
    <p class="issue" id="issue-dd65d327"><a class="self-link" href="#issue-dd65d327"></a> If <var>new timeline</var> is null, we should ensure that <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①">custom
effects</a> get called with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress">iteration progress</a> (unless a subsequent change in the same script execution context makes this
redundant).</p>
    <h4 class="heading settled" data-level="3.2.2" id="setting-the-target-effect"><span class="secno">3.2.2. </span><span class="content">Setting the target effect of an
  animation</span><a class="self-link" href="#setting-the-target-effect"></a></h4>
    <p>After the step to reschedule a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pending-play-task" id="ref-for-pending-play-task">pending play task</a> add the following step:</p>
    <blockquote>
     <ol>
      <li data-md>
       <p>If <var>new effect</var> is not <code>null</code> and
if <var>new effect</var> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group">parent group</a>, <a data-link-type="dfn" href="#remove-an-animation-effect" id="ref-for-remove-an-animation-effect">remove</a> <var>new effect</var> from
its <span id="ref-for-parent-group①">parent group</span>.</p>
     </ol>
    </blockquote>
    <p>After the step to assign <var>new effect</var> as <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-effect" id="ref-for-target-effect">target effect</a> include the following step:</p>
    <blockquote>
     <ol>
      <li data-md>
       <p>If <var>old effect</var> is not <code>null</code>, queue a task to call
any <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect②">custom effects</a> associated with <a data-link-type="dfn" href="#inclusive-descendant" id="ref-for-inclusive-descendant">inclusive descendants</a> of <var>old effect</var> with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress①">iteration progress</a>.</p>
       <div class="issue" id="issue-ddad0532">
        <a class="self-link" href="#issue-ddad0532"></a> This is not quite right. If <var>old effect</var> is attached to another
  animation in the same task then we should probably not do an extra
  callback with <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved②">unresolved</a>. 
        <p>The definition of when <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect③">custom effects</a> gets called needs to be
  audited and probably rewritten.</p>
       </div>
     </ol>
    </blockquote>
    <h4 class="heading settled" data-level="3.2.3" id="waiting-for-the-target-effect"><span class="secno">3.2.3. </span><span class="content">Waiting for the target effect</span><a class="self-link" href="#waiting-for-the-target-effect"></a></h4>
    <p>The definition of when an animation is ready needs to be extended to consider
descendant effects and custom effects such that the first condition is:</p>
    <blockquote>
     <ul>
      <li data-md>
       <p>the user agent has completed any setup required to begin the playback of
each <a data-link-type="dfn" href="#inclusive-descendant" id="ref-for-inclusive-descendant①">inclusive descendant</a> of
the animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-effect" id="ref-for-target-effect①">target effect</a> including rendering the first frame of any <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect">keyframe
effect</a> or executing any <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect④">custom effects</a> associated with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①">animation effect</a>.</p>
     </ul>
    </blockquote>
    <h4 class="heading settled" data-level="3.2.4" id="playing-an-animation-section"><span class="secno">3.2.4. </span><span class="content">Playing an animation</span><a class="self-link" href="#playing-an-animation-section"></a></h4>
    <p>The procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#play-an-animation" id="ref-for-play-an-animation">play an animation</a> needs to include scheduling a task for
updating <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑤">custom effects</a>.</p>
    <h4 class="heading settled" data-level="3.2.5" id="pausing-an-animation-section"><span class="secno">3.2.5. </span><span class="content">Pausing an animation</span><a class="self-link" href="#pausing-an-animation-section"></a></h4>
    <p>The procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pause-an-animation" id="ref-for-pause-an-animation">pause an animation</a> needs to refer to not on the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-effect" id="ref-for-target-effect②">target
effect</a> but also any descedants of the <span id="ref-for-target-effect③">target effect</span>.</p>
    <p>Likewise, the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pause-an-animation" id="ref-for-pause-an-animation①">pause an animation</a> needs to include scheduling
a task for updating <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑥">custom effects</a>.</p>
    <h4 class="heading settled" data-level="3.2.6" id="canceling-an-animation-section"><span class="secno">3.2.6. </span><span class="content">Canceling an animation</span><a class="self-link" href="#canceling-an-animation-section"></a></h4>
    <p>The procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#cancel-an-animation" id="ref-for-cancel-an-animation">cancel an animation</a> needs to include the final step:</p>
    <blockquote>
     <ol>
      <li data-md>
       <p>Queue a task to call any <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑦">custom effects</a> associated with <a data-link-type="dfn" href="#inclusive-descendant" id="ref-for-inclusive-descendant②">inclusive descendants</a> of <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-effect" id="ref-for-target-effect④">target effect</a> with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved③">unresolved</a> iteration progress.</p>
       <p class="issue" id="issue-5b6104df"><a class="self-link" href="#issue-5b6104df"></a> The procedures for calling custom effects need to be reworked.
       Currently they probably involve calling too often for changes that
       could be coalesced.</p>
     </ol>
    </blockquote>
    <h4 class="heading settled" data-level="3.2.7" id="speed-control"><span class="secno">3.2.7. </span><span class="content">Speed control</span><a class="self-link" href="#speed-control"></a></h4>
    <div class="informative-bg">
     <p>Add the following sentence:</p>
     <blockquote>
      <p>Note that <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②">animation effects</a> also have a <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①">playback rate</a> associated
  with them that behaves differently to that defined here.</p>
     </blockquote>
    </div>
    <h3 class="heading settled" data-level="3.3" id="animation-effects"><span class="secno">3.3. </span><span class="content">Animation effects</span><a class="self-link" href="#animation-effects"></a></h3>
    <p>Adds the following text:</p>
    <blockquote>
     <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-effect" id="ref-for-target-effect⑤">target effect</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation">animation</a> is said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="directly associated with an animation" data-noexport id="directly-associated-with-an-animation">directly associated</dfn> with that animation.</p>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③">Animation effects</a> can be combined together into a hierarchy using <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①">group effects</a> (see <a href="#grouping-and-synchronization">§ 3.8 Grouping and synchronization</a>).
    Only the <a data-link-type="dfn" href="#root" id="ref-for-root">root</a> <span id="ref-for-animation-effect④">animation effect</span> of such a hierarchy can be <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation">directly associated with an animation</a>.
    If an <span id="ref-for-animation-effect⑤">animation effect</span> that has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②">parent group</a> is designated as the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-effect" id="ref-for-target-effect⑥">target effect</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①">animation</a>, the <span id="ref-for-animation-effect⑥">animation effect</span> is removed from its <span id="ref-for-parent-group③">parent group</span> before
    being associated with the <span id="ref-for-animation②">animation</span>.</p>
     <p>An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦">animation effect</a> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associated-with-an-animation">associated with an animation</dfn> if
    it is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation①">directly associated with an animation</a> or if it has an <a data-link-type="dfn" href="#ancestor" id="ref-for-ancestor">ancestor</a> <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②">group effect</a> that is <span id="ref-for-directly-associated-with-an-animation②">directly associated with an
    animation</span>.</p>
    </blockquote>
    <h4 class="heading settled" data-level="3.3.1" id="types-of-animation-effects"><span class="secno">3.3.1. </span><span class="content">Types of animation effects</span><a class="self-link" href="#types-of-animation-effects"></a></h4>
    <p>This specification defines two types of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧">animation effects</a>:</p>
    <ul>
     <li data-md>
      <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect①">keyframe effects</a>, and</p>
     <li data-md>
      <p><a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③">group effects</a>.</p>
    </ul>
    <h4 class="heading settled" data-level="3.3.2" id="the-active-interval"><span class="secno">3.3.2. </span><span class="content">The active interval</span><a class="self-link" href="#the-active-interval"></a></h4>
    <p>In this level of the specification the lower bound of the acive interval is
defined as:</p>
    <blockquote>
     <p>The lower bound of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval">active interval</a> is determined by the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time">start time</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨">animation effect</a> but may be shifted by a <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay">start delay</a> on
    the <span id="ref-for-animation-effect①⓪">animation effect</span>.</p>
    </blockquote>
    <p>The subsequent diagram should also refer to the <em>animation effect start
time</em> as opposed to the <em>animation start time</em>.</p>
    <p>Finally, the description of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay">end delay</a> is updated to:</p>
    <blockquote>
     <p>An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay①">end delay</a> may also be specified but is primarily only of
    use when sequencing animations such as by using a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①">sequence effect</a>.</p>
    </blockquote>
   </div>
   <p>The normative description is updated as follows:</p>
   <blockquote>
    <p>The lower bound of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①">active interval</a> is defined by the
    combination of the animation effect’s <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①">start time</a> and <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①">start delay</a>.</p>
    <p>An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①">animation effect</a>’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="animation effect start time" data-noexport id="animation-effect-start-time">start time</dfn> is the moment at
    which the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group④">parent group</a>,
    if any, has scheduled the <span id="ref-for-animation-effect①②">animation effect</span> to begin.
    It is expressed in <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time">inherited time</a>.</p>
    <p>In most cases, including the case when the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①③">animation effect</a> has
    no <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑤">parent group</a>,
    the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②">start time</a> is zero.
    The singular exception is <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect②">sequence effects</a> which set
    the <span id="ref-for-animation-effect-start-time③">start times</span> of their
    children as described in <a href="#the-start-time-of-children-of-a-sequence-effect">§ 3.8.4.1 The start time of
  children of a sequence effect</a>.</p>
    <p>In addition to the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time④">start
    time</a>, an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①④">animation effect</a> also has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="start-delay">start delay</dfn> which is an offset from the <span id="ref-for-animation-effect-start-time⑤">start
    time</span>.</p>
    <p>Unlike the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time⑥">start time</a> which
    is determined by the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑥">parent group</a>, the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay②">start
    delay</a> is a property of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑤">animation effect</a> itself.</p>
    <p>The lower bound of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval②">active interval</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑥">animation
    effect</a>, expressed in <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time①">inherited time
    space</a>, is the sum of the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time⑦">start time</a> and the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay③">start
    delay</a>.</p>
    <p>These definitions are incorporated in the calculation of the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time">local
    time</a> (see <a href="#local-time-and-inherited-time">§ 3.3.3 Local time and inherited time</a>) and <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time">active time</a>.</p>
   </blockquote>
   <p>And finally regarding the definition of the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time">end time</a>:</p>
   <blockquote>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="end-time">end time</dfn> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑦">animation effect</a> is the result of
    evaluating <code>max(<a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time⑧">start
    time</a> + <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay④">start delay</a> + <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration">active duration</a> + <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay②">end delay</a>,
    0)</code>.</p>
   </blockquote>
   <h4 class="heading settled" data-level="3.3.3" id="local-time-and-inherited-time"><span class="secno">3.3.3. </span><span class="content">Local time and inherited time</span><a class="self-link" href="#local-time-and-inherited-time"></a></h4>
   <p>This section is added.</p>
   <div class="informative-bg">
    <p>In Web Animations all times are relative to some point of reference.
These different points of reference produce different <em>time
spaces</em>.</p>
    <p>This can be compared to coordinate spaces as used in computer
graphics.
The zero time of a time space is analogous to the origin of
a coordinate space.</p>
    <p>Just as with coordinate spaces, time spaces can also be nested. <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect④">Group effects</a> typically perform some
transformations on the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value">time values</a> they
receive from their <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑦">parent</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation③">animation</a> before passing on the transformed <span id="ref-for-time-value①">time values</span> to their children.
Child <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑧">animation effects</a> then operate <em>within</em> that
transformed time space.</p>
    <p>Children take the transformed time values from their
parent—called the <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time②">inherited time</a>—and add their <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time⑨">start time</a> to establish
their own <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①">local time space</a> as illustrated
below.</p>
    <figure>
      <img alt="Inherited time and local time." src="img/local-time.svg" width="600"> 
     <figcaption> Inherited time and local time.<br> At time <var>t</var>, the <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time③">inherited time</a> is 2.5.<br> For <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⑨">animation effect</a> (a) which has a <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⓪">start time</a> of 1, the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time②">local time</a> is 1.5.<br> For <span id="ref-for-animation-effect②⓪">animation effect</span> (b) which has a <span id="ref-for-animation-effect-start-time①①">start time</span> of 1
      and a <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑤">start delay</a> of 1,
      the <span id="ref-for-local-time③">local time</span> is also 1.5
      since <span id="ref-for-local-time④">local time</span> is based on an <span id="ref-for-animation-effect②①">animation effect</span>’s <span id="ref-for-animation-effect-start-time①②">start time</span> only,
      and not on its <span id="ref-for-start-delay⑥">start delay</span>. </figcaption>
    </figure>
   </div>
   <p>For an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②②">animation effect</a>, the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="inherited-time">inherited time</dfn> at
a given moment is based on the first matching condition from the
following:</p>
   <div class="switch">
    <dl>
     <dt data-md>If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②③">animation effect</a> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑧">parent group</a>,
     <dd data-md>
      <p>the inherited time is the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group⑨">parent group</a>’s current <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time">transformed time</a>.</p>
     <dt data-md>If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②④">animation effect</a> is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation③">directly associated with
an animation</a>,
     <dd data-md>
      <p>the inherited time is the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-time" id="ref-for-current-time">current time</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation④">animation</a>.</p>
     <dt data-md>Otherwise,
     <dd data-md>
      <p>the inherited time is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved④">unresolved</a>.</p>
    </dl>
   </div>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="local-time">local time</dfn> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②⑤">animation effect</a> is the <span id="ref-for-animation-effect②⑥">animation effect</span>’s <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time④">inherited time</a> minus its <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①③">start time</a>.
If the <span id="ref-for-inherited-time⑤">inherited time</span> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑤">unresolved</a> then the local time
is also <span id="ref-for-unresolved⑥">unresolved</span>.</p>
   <h4 class="heading settled" data-level="3.3.4" id="animation-effect-phases-and-states"><span class="secno">3.3.4. </span><span class="content">Animation effect phases and
states</span><a class="self-link" href="#animation-effect-phases-and-states"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The non-normative description of the <a data-link-type="dfn" href="#in-play" id="ref-for-in-play">in play</a> state includes the following
description;</p>
    <blockquote>
     <p>This occurs when the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②⑦">animation effect</a> <em>and all its
    ancestors</em> are in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-phase" id="ref-for-active-phase">active phase</a>. <span id="ref-for-animation-effect②⑧">Animation effects</span> only “move” when
    they are <a data-link-type="dfn" href="#in-play" id="ref-for-in-play①">in play</a>.</p>
     <p>It is possible for an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect②⑨">animation effect</a> to be in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-phase" id="ref-for-active-phase①">active phase</a> but not <a data-link-type="dfn" href="#in-play" id="ref-for-in-play②">in play</a>.
    For example, if an <span id="ref-for-animation-effect③⓪">animation effect</span> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⓪">parent
    group</a> that causes the animation effect’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval③">active
    interval</a> to be clipped and both parent and child apply the
    same <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode">fill mode</a>, the child <span id="ref-for-animation-effect③①">animation effect</span> may be
    effectively be snapshotted within the <span id="ref-for-active-phase②">active phase</span> despite no longer being <span id="ref-for-in-play③">in play</span>.</p>
    </blockquote>
    <p>Likewise for <a data-link-type="dfn" href="#current" id="ref-for-current">current</a></p>
    <blockquote>
     <p>This will be the case if the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③②">animation effect</a> is <a data-link-type="dfn" href="#in-play" id="ref-for-in-play④">in
    play</a> or in its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-phase" id="ref-for-before-phase">before phase</a>, <em>or</em> it has an
    ancestor for which this is true thereby opening up the
    possibility that this <span id="ref-for-animation-effect③③">animation effect</span> might play again
    (e.g. due to repeating).</p>
    </blockquote>
   </div>
   <p>The normative definition of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="in-play">in play</dfn> includes the following condition:</p>
   <blockquote>
    <ol start="2">
     <li data-md>
      <p>the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③④">animation effect</a> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①①">parent group</a> that
is <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑤">in play</a> or else the <span id="ref-for-animation-effect③⑤">animation effect</span> is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation④">directly associated with an animation</a> that is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#finished-play-state" id="ref-for-finished-play-state">finished</a>.</p>
    </ol>
   </blockquote>
   <p>In place of:</p>
   <blockquote>
    <ol start="2">
     <li data-md>
      <p>the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③⑥">animation effect</a> is <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation">associated with an animation</a> that is
not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#finished-play-state" id="ref-for-finished-play-state①">finished</a>.</p>
    </ol>
   </blockquote>
   <p>The normative definition of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current">current</dfn> adds the following
condition:</p>
   <blockquote>
    <ul>
     <li data-md>
      <p>the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③⑦">animation effect</a> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①②">parent group</a> and the <span id="ref-for-parent-group①③">parent group</span> is <a data-link-type="dfn" href="#current" id="ref-for-current①">current</a>.</p>
    </ul>
   </blockquote>
   <h4 class="heading settled" data-level="3.3.5" id="fill-modes"><span class="secno">3.3.5. </span><span class="content">Fill modes</span><a class="self-link" href="#fill-modes"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The description of the forwards fill mode is updated from:</p>
    <blockquote>
     <p>When the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#after-phase" id="ref-for-after-phase">after phase</a>, …</p>
    </blockquote>
    <p>to:</p>
    <blockquote>
     <p>When the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#after-phase" id="ref-for-after-phase①">after phase</a>,
    or when the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-phase" id="ref-for-active-phase③">active phase</a> but an <a data-link-type="dfn" href="#ancestor" id="ref-for-ancestor①">ancestor</a> is in its <span id="ref-for-after-phase②">after phase</span>, …</p>
    </blockquote>
    <p>The description of the backwards fill mode is updated from:</p>
    <blockquote>
     <p>When the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-phase" id="ref-for-before-phase①">before phase</a>, …</p>
    </blockquote>
    <p>to:</p>
    <blockquote>
     <p>When the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-phase" id="ref-for-before-phase②">before phase</a>,
    or when the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-phase" id="ref-for-active-phase④">active phase</a> but an <a data-link-type="dfn" href="#ancestor" id="ref-for-ancestor②">ancestor</a> is in its <span id="ref-for-before-phase③">before phase</span>, …</p>
    </blockquote>
    <p>The description of the both fill mode is updated from:</p>
    <blockquote>
     <p>When the animation effect …</p>
    </blockquote>
    <p>to:</p>
    <blockquote>
     <p>When the animation effect or an <a data-link-type="dfn" href="#ancestor" id="ref-for-ancestor③">ancestor</a> …</p>
    </blockquote>
    <p>(twice).</p>
    <div class="issue" id="issue-e54c2365">
     <a class="self-link" href="#issue-e54c2365"></a> Currently <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function">timing functions</a> that generate results outside the
range [0, 1] will behave unexpectedly when applied to group
effects, as children will increase iterations or enter into fill mode
rather than continuing to extrapolate along their defined behavior
(which is what they would do if the timing function applied to them
directly). 
     <p>To fix this it is possible we will wish to introduce ‘overflow’
fill modes that respond to time values larger than or smaller than the
active time range by extrapolating rather than filling.</p>
     <p>See <a href="http://lists.w3.org/Archives/Public/public-fx/2013AprJun/0184.html">section
15 (Overflowing fill) of minuted discussion from Tokyo 2013 F2F</a>.</p>
    </div>
   </div>
   <h3 class="heading settled" data-level="3.4" id="repeating"><span class="secno">3.4. </span><span class="content">Repeating</span><a class="self-link" href="#repeating"></a></h3>
   <h4 class="heading settled" data-level="3.4.1" id="iteration-intervals"><span class="secno">3.4.1. </span><span class="content">Iteration intervals</span><a class="self-link" href="#iteration-intervals"></a></h4>
   <p>After:</p>
   <blockquote>
    <p>The length of a single iteration is called the iteration duration.</p>
   </blockquote>
   <p>Add:</p>
   <blockquote>
    <p>The initial <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration">iteration duration</a> of an animation effect is simply its <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration">intrinsic iteration duration</a>.</p>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="intrinsic-iteration-duration">intrinsic iteration duration</dfn> of an animation effect is
    zero, however some specific types of animation effect such as <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect⑤">group effects</a> override this behavior and provide an
    alternative intrinsic duration (see <a href="#the-intrinsic-iteration-duration-of-a-group-effect">§ 3.8.3 The intrinsic
  iteration duration of a group effect</a> and <a href="#the-intrinsic-iteration-duration-of-a-sequence-effect">§ 3.8.4.2 The intrinsic
  iteration duration of a sequence effect</a>).</p>
    <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①">iteration duration</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③⑧">animation effect</a> may be set
    by the author to represent a value other than the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration①">intrinsic
    iteration duration</a>.</p>
   </blockquote>
   <h4 class="heading settled" data-level="3.4.2" id="iteration-time-space"><span class="secno">3.4.2. </span><span class="content">Iteration time space</span><a class="self-link" href="#iteration-time-space"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The first few paragraphs of this section are replaced with:</p>
    <blockquote>
     <p>We have already encountered different time spaces in describing <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑤">local time</a> and <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time⑥">inherited time</a> (see <a href="#local-time-and-inherited-time">§ 3.3.3 Local time and inherited time</a>).
    Repetition introduces yet another time space: the iteration time
    space.</p>
    </blockquote>
   </div>
   <h4 class="heading settled" data-level="3.4.3" id="interval-timing"><span class="secno">3.4.3. </span><span class="content">Interval timing</span><a class="self-link" href="#interval-timing"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The description is updated as follows:</p>
    <blockquote>
     <p>In the examples below, for the repeated effect, at local time 1s,
    the iteration time is 0.
    For the sequenced effects, at inherited time 1s, only effect B will be <a data-link-type="dfn" href="#in-play" id="ref-for-in-play⑥">in play</a>; there is no overlap.</p>
    </blockquote>
    <p>And likewise the figure is updated as follows:</p>
    <figure>
      <img alt="Illustration of end-point exclusive timing." src="img/endpoint-exclusive-timing.svg" width="600"> 
     <figcaption> Illustration of end-point exclusive timing. For both repeated and
    sequenced animation effects there is no overlap at the boundaries
    between intervals. </figcaption>
    </figure>
   </div>
   <h3 class="heading settled" data-level="3.5" id="animation-effect-speed-control"><span class="secno">3.5. </span><span class="content">Animation effect speed control</span><a class="self-link" href="#animation-effect-speed-control"></a></h3>
   <p>(This section is added.)</p>
   <p>Like <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation⑤">animations</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect③⑨">animation effects</a> also have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="animation effect playback rate" data-noexport id="animation-effect-playback-rate">playback rate</dfn> parameter.
The <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②">playback rate</a> of
an <span id="ref-for-animation-effect④⓪">animation effect</span> is a finite real number that acts as
a multiplier when calculating the <span id="ref-for-animation-effect④①">animation effect</span>’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time①">transformed
time</a> from its <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑥">local time</a>.</p>
   <p>The effect of setting the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate③">playback rate</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④②">animation effect</a> differs from the
setting the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-playback-rate" id="ref-for-animation-playback-rate">playback rate</a> on
an animation.
Its behavior is defined in the timing calculations given in <a href="#core-animation-effect-calculations">§ 3.6 Core animation effect
calculations</a>.</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>In summary, the behavior of the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate④">playback rate</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④③">animation effect</a> is as follows:</p>
    <ul>
     <li data-md>
      <p>The <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑤">playback rate</a> is
applied only to the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval④">active interval</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④④">animation
effect</a> and not to the time while it is <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑦">delayed</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode①">filling</a>.</p>
     <li data-md>
      <p>Setting a negative <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑥">playback
rate</a> on an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④⑤">animation effect</a> causes the <span id="ref-for-animation-effect④⑥">animation
effect</span> to begin at the end of its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval⑤">active interval</a>.
This differs from the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-playback-rate" id="ref-for-animation-playback-rate①">playback
rate</a> on an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation⑥">animation</a>.
Setting a <span id="ref-for-animation-playback-rate②">playback rate</span> on
an <span id="ref-for-animation⑦">animation</span> to a negative value at a moment before the <span id="ref-for-animation⑧">animation</span>’s target effect has begun, will result in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-effect" id="ref-for-target-effect⑦">target effect</a> never playing.</p>
     <li data-md>
      <p>Setting the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑦">playback
rate</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④⑦">animation effect</a> affects the calculated value of
the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration①">active duration</a> (see <a href="#calculating-the-active-duration">§ 3.6.2 Calculating the active duration</a>).</p>
     <li data-md>
      <p>Changing the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑧">playback
rate</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④⑧">animation effect</a> whose <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑦">local time</a> is
within its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval⑥">active interval</a> will cause it to jump.
This is because the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration②">active duration</a> will be updated but the <span id="ref-for-local-time⑧">local time</span> will not.</p>
      <p>Furthermore, if other <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect④⑨">animation effects</a> depend on the <span id="ref-for-animation-effect⑤⓪">animation effect</span>’s <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration③">active duration</a>, such as sibling <span id="ref-for-animation-effect⑤①">animation effect</span> in a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect③">sequence effect</a>, they
too may jump as a result of setting the <span id="ref-for-animation-effect⑤②">animation effect</span>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate⑨">playback rate</a>.</p>
      <p>For runtime speed control the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-playback-rate" id="ref-for-animation-playback-rate③">playback rate</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation⑨">animation</a> should be used.</p>
    </ul>
   </div>
   <h3 class="heading settled" data-level="3.6" id="core-animation-effect-calculations"><span class="secno">3.6. </span><span class="content">Core animation effect
calculations</span><a class="self-link" href="#core-animation-effect-calculations"></a></h3>
   <h4 class="heading settled" data-level="3.6.1" id="animation-effect-calculations-overview"><span class="secno">3.6.1. </span><span class="content">Overview</span><a class="self-link" href="#animation-effect-calculations-overview"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>Update description from:</p>
    <blockquote>
     <p>At the core of the Web Animations timing model is the process that
    takes a <a data-link-type="dfn" href="#local-time" id="ref-for-local-time⑨">local time</a> value and converts it to an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress②">iteration
    progress</a>.</p>
    </blockquote>
    <p>to:</p>
    <blockquote>
     <p>At the core of the Web Animations timing model is the process that
    takes an <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time⑦">inherited time</a> value
    and converts it to an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress③">iteration progress</a>.</p>
    </blockquote>
    <p>Update diagram to show animation effect playback rate:</p>
    <figure>
      <img alt="Calculation of the active duration." src="img/active-duration-calculation.svg" width="650"> 
     <figcaption> Calculation of the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration④">active duration</a> is based on
    multiplying the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration②">iteration duration</a> by the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count">iteration count</a> and then dividing by the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⓪">playback rate</a>. </figcaption>
    </figure>
    <p>Update:</p>
    <blockquote>
     <p>Having established the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑤">active duration</a>, the process for
    transforming an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤③">animation effect</a>’s <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⓪">local time</a> into its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress">transformed progress</a> (<a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress④">iteration progress</a>) is illustrated
    below.</p>
    </blockquote>
    <p>to:</p>
    <blockquote>
     <p>Having established the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑥">active duration</a>, the process for
    transforming an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤④">animation effect</a>’s <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time⑧">inherited time</a> into its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress①">transformed progress</a> (<a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑤">iteration progress</a>) is illustrated
    below.</p>
    </blockquote>
    <p>Update the time calculations diagram as follows:</p>
    <figure>
      <img alt="An overview of timing model calculations." src="img/time-calculations.svg" width="650"> 
     <figcaption> An overview of timing model calculations.<br> (1) The <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time⑨">inherited time</a> is converted into a <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①①">local time</a> by
    incorporating the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①④">start time</a>.<br> (2) The <span id="ref-for-local-time①②">local time</span> is converted into an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time①">active time</a> by
    incorporating the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑧">start
    delay</a>.<br> (3) The <span id="ref-for-active-time②">active time</span> is divided by the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration③">iteration duration</a> incorporating also the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-start" id="ref-for-iteration-start">iteration start</a> property and the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①①">playback rate</a> property
    to produce the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#overall-progress" id="ref-for-overall-progress">overall progress</a>.<br> (4) The <span id="ref-for-overall-progress①">overall progress</span> time is then converted to an offset
    within a single iteration: the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#simple-iteration-progress" id="ref-for-simple-iteration-progress">simple iteration progress</a>.<br> (5) The <span id="ref-for-simple-iteration-progress①">simple iteration progress</span> is converted into a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#directed-progress" id="ref-for-directed-progress">directed
    progress</a> by incorporating the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#playback-direction" id="ref-for-playback-direction">playback direction</a>.<br> (6) Finally, a timing function is applied to the <span id="ref-for-directed-progress①">directed
    progress</span> to produce the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress②">transformed progress</a>. </figcaption>
    </figure>
    <p>Update:</p>
    <blockquote>
     <p>The first step, calculating the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①③">local time</a> is described in
    Local time.</p>
    </blockquote>
    <p>to:</p>
    <blockquote>
     <p>The first step, calculating the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①④">local time</a> is described in <a href="#local-time-and-inherited-time">§ 3.3.3 Local time and inherited time</a>.</p>
    </blockquote>
   </div>
   <h4 class="heading settled" data-level="3.6.2" id="calculating-the-active-duration"><span class="secno">3.6.2. </span><span class="content">Calculating the active duration</span><a class="self-link" href="#calculating-the-active-duration"></a></h4>
   <p>Updated to:</p>
   <blockquote>
    <p>In order to calculate the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑦">active duration</a> we first define the <a data-link-type="dfn" href="#repeated-duration" id="ref-for-repeated-duration">repeated duration</a> as follows:</p>
    <blockquote>
      <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="repeated-duration">repeated duration</dfn> = <code><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration④">iteration duration</a> × <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count①">iteration count</a></code> 
     <p> If either the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑤">iteration duration</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count②">iteration count</a> are zero, the <a data-link-type="dfn" href="#repeated-duration" id="ref-for-repeated-duration①">repeated duration</a> is zero. </p>
     <p class="note" role="note"> This clarification is needed since the result of infinity
          multiplied by zero is undefined according to IEEE 754-2008. </p>
    </blockquote>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-duration">active duration</dfn> is calculated according to the following
    steps:</p>
    <ol>
     <li data-md>
      <p>If the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①②">playback rate</a> is
  zero, return <code>Infinity</code>.</p>
     <li data-md>
      <p>Otherwise, return <code><a data-link-type="dfn" href="#repeated-duration" id="ref-for-repeated-duration②">repeated duration</a> / abs(<a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①③">playback rate</a>)</code>.</p>
    </ol>
   </blockquote>
   <h4 class="heading settled" data-level="3.6.3" id="transforming-the-local-time"><span class="secno">3.6.3. </span><span class="content">Transforming the local time</span><a class="self-link" href="#transforming-the-local-time"></a></h4>
   <h5 class="heading settled" data-level="3.6.3.1" id="calculating-the-active-time"><span class="secno">3.6.3.1. </span><span class="content">Calculating the active time</span><a class="self-link" href="#calculating-the-active-time"></a></h5>
   <p>Update the qualification on the definition of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time③">active time</a> to include
reference to the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①④">parent group</a>:</p>
   <blockquote>
    <p>However, it is only defined when the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤⑤">animation effect</a> should
    produce an output and hence depends on its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode②">fill mode</a> and
    phase as well as the phase of its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑤">parent group</a>, if any,
    as follows,</p>
   </blockquote>
   <div class="switch">
    <p>Update the definition to include the additional steps to for each phase:</p>
    <blockquote>
     <dl>
      <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-phase" id="ref-for-before-phase④">before phase</a>,
      <dd data-md>
       <p>The result depends on the first matching condition from the
following,</p>
       <div class="switch">
        <dl>
         <dt data-md>If the animation effect has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑥">parent group</a> and that parent group is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#after-phase" id="ref-for-after-phase③">after
phase</a>,
         <dd data-md>
          <p>Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑦">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value②">time value</a>.</p>
        </dl>
       </div>
       <p>…</p>
      <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-phase" id="ref-for-active-phase⑤">active phase</a>,
      <dd data-md>
       <p>The result depends on the first matching condition from the
following,</p>
       <div class="switch">
        <dl>
         <dt data-md>If the animation effect has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑦">parent group</a> and that parent group is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-phase" id="ref-for-before-phase⑤">before
phase</a>, and the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode③">fill mode</a> of this animation effect
is <span class="prop-value">none</span> or <span class="prop-value">forwards,</span>
         <dd data-md>
          <p>Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑧">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value③">time value</a>.</p>
         <dt data-md>If the animation effect has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑧">parent group</a> and that parent group is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#after-phase" id="ref-for-after-phase④">after
phase</a>, and the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#fill-mode" id="ref-for-fill-mode④">fill mode</a> of this animation effect
is <span class="prop-value">none</span> or <span class="prop-value">backwards,</span>
         <dd data-md>
          <p>Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved⑨">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value④">time value</a>.</p>
         <dt data-md>Otherwise,
         <dd data-md>
          <p>Return the result of evaluating <code><a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑤">local time</a> - <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay⑨">start delay</a></code>.</p>
        </dl>
       </div>
      <dt data-md>If the animation effect is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#after-phase" id="ref-for-after-phase⑤">after phase</a>,
      <dd data-md>
       <p>The result depends on the first matching condition from the
following,</p>
       <div class="switch">
        <dl>
         <dt data-md>If the animation effect has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group①⑨">parent group</a> and that parent group is in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-phase" id="ref-for-before-phase⑥">before
phase</a>,
         <dd data-md>
          <p>Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①⓪">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value⑤">time value</a>.</p>
        </dl>
       </div>
       <p>…</p>
      <dt data-md>Otherwise (the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑥">local time</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①①">unresolved</a>),
      <dd data-md>
       <p>Return an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①②">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#time-value" id="ref-for-time-value⑥">time value</a>.</p>
     </dl>
    </blockquote>
   </div>
   <h5 class="heading settled" data-level="3.6.3.2" id="calculating-the-overall-progress"><span class="secno">3.6.3.2. </span><span class="content">Calculating the overall progress</span><a class="self-link" href="#calculating-the-overall-progress"></a></h5>
   <p>In the definition of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#overall-progress" id="ref-for-overall-progress②">overall progress</a> update the “Otherwise”
branch of the definition of the <var>initial progress</var> as:</p>
   <blockquote>
    <dl>
     <dt data-md>Otherwise,
     <dd data-md>
      <p>Calculate the <var>overall progress</var> following the first
matching condition from below:</p>
      <div class="switch">
       <dl>
        <dt data-md>If the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①④">animation effect playback rate</a> is less than zero,
        <dd data-md>
         <p>Let <var>overall progress</var> be <code>(<a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time④">active time</a> - <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑧">active duration</a>)
× <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑤">playback
rate</a> / <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑥">iteration duration</a></code>.</p>
        <dt data-md>If the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑥">animation effect playback rate</a> is zero,
        <dd data-md>
         <p>Let <var>overall progress</var> be zero.</p>
        <dt data-md>Otherwise,
        <dd data-md>
         <p>Let <var>overall progress</var> be <code>(<a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-time" id="ref-for-active-time⑤">active time</a> × <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑦">playback rate</a>) / <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑦">iteration duration</a></code>.</p>
       </dl>
      </div>
    </dl>
   </blockquote>
   <h3 class="heading settled" data-level="3.7" id="time-transformations"><span class="secno">3.7. </span><span class="content">Time transformations</span><a class="self-link" href="#time-transformations"></a></h3>
   <div class="issue" id="issue-b2228569">
    <a class="self-link" href="#issue-b2228569"></a> Currently, the set of <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function①">timing functions</a> allowed on
a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect⑥">group effect</a> is not restricted.
This has raised concern about complexity of implementation and also
complexity of behavior with regards to fill modes.
As a result, allowing the full set of timing functions on group
effects is considered <strong>at risk</strong>. 
    <p>Alternatives are to either restrict timing functions on group
effects to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#linear-easing-function" id="ref-for-linear-easing-function">linear timing function</a> or to a set of
“simple” timing functions that have properties that
alleviate some of the concerns with the more complex timing
functions.</p>
    <p>See <a href="http://lists.w3.org/Archives/Public/public-fx/2013JulSep/0076.html">section
2 of the discussion from August 2013</a>.</p>
   </div>
   <p></p>
   <h4 class="heading settled" data-level="3.7.1" id="calculating-the-transformed-progress"><span class="secno">3.7.1. </span><span class="content">Calculating the transformed progress</span><a class="self-link" href="#calculating-the-transformed-progress"></a></h4>
   <p>Replace the second step as the calculation of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#before-flag" id="ref-for-before-flag">before flag</a> (to
accommodate the effect playback rate):</p>
   <blockquote>
    <ol>
     <li data-md>
      <p>If <em>either</em> the <var>current direction</var> is <span class="prop-value">forwards</span> or the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑧">animation effect
playback rate</a> ≥ 0 (but <em>not</em> when both conditions
are true),
let <var>going forwards</var> be true, otherwise it is false.</p>
    </ol>
   </blockquote>
   <h4 class="heading settled" data-level="3.7.2" id="calculating-the-transformed-time"><span class="secno">3.7.2. </span><span class="content">Calculating the transformed time</span><a class="self-link" href="#calculating-the-transformed-time"></a></h4>
   <p>(This section is added.)</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="transformed-time">transformed time</dfn> of an animation effect is simply the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress③">transformed progress</a> multiplied by the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑧">iteration duration</a>.</p>
   <p>If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress④">transformed progress</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①③">unresolved</a>, then the <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time②">transformed
time</a> is also <span id="ref-for-unresolved①④">unresolved</span>.</p>
   <p>If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#transformed-progress" id="ref-for-transformed-progress⑤">transformed progress</a> is zero and the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration⑨">iteration duration</a> is infinity, then the <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time③">transformed time</a> is zero.</p>
   <h3 class="heading settled" data-level="3.8" id="grouping-and-synchronization"><span class="secno">3.8. </span><span class="content">Grouping and synchronization</span><a class="self-link" href="#grouping-and-synchronization"></a></h3>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>While it is possible to set the timing properties of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤⑥">animation
effects</a> individually, it is often useful to synchronize <span id="ref-for-animation-effect⑤⑦">animation
effects</span> so that they share common timing properties and maintain
their temporal relationship.  This is achieved using an <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect⑦">group
effect</a>.</p>
    <p>A simple example is illustrated below.</p>
    <figure>
      <img alt="Using groups to share common timing properties." src="img/grouping-delay.svg" width="800"> 
     <figcaption> Using groups to share common timing properties.<br> (a) Shows setting a delay of 5 seconds on individual animations.<br> (b) Produces the same effect by setting the delay on the group. </figcaption>
    </figure>
    <p>When a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect⑧">group effect</a> is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation⑤">directly associated with
an animation</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤⑧">animation effect</a> associated with the <span id="ref-for-group-effect⑨">group effect</span> can be seeked, paused, and stopped as a unit.</p>
    <p></p>
   </div>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="group-effect">group effect</dfn> is a type of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑤⑨">animation effect</a> that
contains an ordered sequence of zero or more <span id="ref-for-animation-effect⑥⓪">animation effects</span> known as <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="child effect" data-noexport id="child-effect">child effects</dfn>.</p>
   <p>At a given moment, an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥①">animation effect</a> may be a <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect">child effect</a> of at most one <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⓪">group effect</a> known as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="parent-group">parent group</dfn>.
The <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⓪">parent group</a> cannot be the same <span id="ref-for-animation-effect⑥②">animation
effect</span> as the <span id="ref-for-child-effect①">child effect</span> itself.</p>
   <p>By nesting <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①①">group effects</a> it is possible to create hierarchical
tree structures.
The following terms are used to describe the parts and properties of
such structures and are defined in <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="tree order" data-noexport id="tree-order"><a href="https://www.w3.org/TR/dom/#concept-tree-order"> tree order</a></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="root" data-noexport id="root"><a href="https://www.w3.org/TR/dom/#concept-tree-root"> root</a></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="ancestor" data-noexport id="ancestor"><a href="https://www.w3.org/TR/dom/#concept-tree-ancestor"> ancestor</a></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="descendant" data-noexport id="descendant"><a href="https://www.w3.org/TR/dom/#concept-tree-descendant"> descendant</a></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="inclusive ancestor" data-noexport id="inclusive-ancestor"><a href="https://www.w3.org/TR/dom/#concept-tree-inclusive-ancestor"> inclusive ancestor</a></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="inclusive descendant" data-noexport id="inclusive-descendant"><a href="https://www.w3.org/TR/dom/#concept-tree-inclusive-descendant"> inclusive descendant</a></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="next sibling" data-noexport id="next-sibling"><a href="https://www.w3.org/TR/dom/#concept-tree-next-sibling"> next sibling</a></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="previous sibling" data-noexport id="previous-sibling"><a href="https://www.w3.org/TR/dom/#concept-tree-previous-sibling"> previous sibling</a></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="first child" data-noexport id="first-child"><a href="https://www.w3.org/TR/dom/#concept-tree-first-child"> first child</a></dfn></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="last child" data-noexport id="last-child"><a href="https://www.w3.org/TR/dom/#concept-tree-last-child"> last child</a></dfn></p>
   </ul>
   <p class="note" role="note"><span>Note:</span> in applying these definitions to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥③">animation effects</a>, the
    term <em>parent</em> refers exclusively to a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②①">parent group</a> and does <em>not</em> include the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⓪">animation</a> which with
    an <span id="ref-for-animation-effect⑥④">animation effect</span> may be <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation⑥">directly associated</a> despite the fact that conceptually the <span id="ref-for-animation①①">animation</span> acts as a parent
    time source.</p>
   <p>The temporal relationship between a <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect②">child effect</a> and its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②②">parent group</a> is incorporated in the definition of <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time①⓪">inherited time</a> (see <a href="#local-time-and-inherited-time">§ 3.3.3 Local time and inherited time</a>).</p>
   <h4 class="heading settled" data-level="3.8.1" id="relationship-of-group-time-to-child-time"><span class="secno">3.8.1. </span><span class="content">Relationship of group time to child time</span><a class="self-link" href="#relationship-of-group-time-to-child-time"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>The timing of the children of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①②">group effect</a> is based on
the timing of the group.
Specifically, times for the children are based on the parent’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time④">transformed time</a>.
With regards to repetition, this means the children operate <em>inside</em> an iteration of the parent.</p>
    <p>For example, if a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①③">group effect</a> has an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count③">iteration
count</a> of 2, then the children of of the group will all play twice
since they effectively play <em>inside</em> the group’s iterations.</p>
    <figure>
      <img alt="The effect of multiple iterations on the children of a group." src="img/grouping-repetition.svg" width="600"> 
     <figcaption> Since children of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①④">group effect</a> base their timing on the
    group’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time⑤">transformed time</a>, when the group repeats, the
    children play again. </figcaption>
    </figure>
    <p>Note that even in this case, the child <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥⑤">animation effects</a> still
have only <em>one</em> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval⑦">active interval</a>.
However, as a result of the parent’s timing, the <span id="ref-for-active-interval⑧">active
interval</span> is played twice.</p>
    <p>If an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count④">iteration count</a> is specified for the children of a group
as well as for the group itself, the effect is as if the <span id="ref-for-iteration-count⑤">iteration
count</span> of the group was multiplied with the <span id="ref-for-iteration-count⑥">iteration count</span> of the children.</p>
    <figure>
      <img alt="Iteration counts are multiplicative." src="img/grouping-repetition-and-animation-repetition.svg" width="600"> 
     <figcaption> Specifying an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count⑦">iteration count</a> of 2 on a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑤">group effect</a> and an <span id="ref-for-iteration-count⑧">iteration count</span> of 3 on one of its children results in
    that child playing 6 times. </figcaption>
    </figure>
    <p>A further result of the children of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑥">group effect</a> basing
their timing on the group’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time⑥">transformed time</a> is that they
cannot animate outside of the group’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval⑨">active interval</a>.
This is because the <span id="ref-for-transformed-time⑦">transformed time</span> of a group will not
change outside its <span id="ref-for-active-interval①⓪">active interval</span>.
This allows groups to <em>clip</em> the playback of their children.</p>
    <figure>
      <img alt="Groups clip the active interval of contained children." src="img/grouping-clipping.svg" width="600"> 
     <figcaption> In the first instance, an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥⑥">animation effect</a> has a negative delay
    and an infinite <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-count" id="ref-for-iteration-count⑨">iteration count</a>.<br> However, when a similar <span id="ref-for-animation-effect⑥⑦">animation effect</span> is placed inside
    a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑦">group effect</a> with a specified <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①⓪">iteration duration</a> it has the effect of clipping the child <span id="ref-for-animation-effect⑥⑧">animation effect</span>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①①">active interval</a>. </figcaption>
    </figure>
    <p>Some further consequences of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑧">group effect</a> children basing
their timing on their parent group’s <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time⑧">transformed time</a> are:</p>
    <ul>
     <li data-md>
      <p>Setting the <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate①⑨">playback
rate</a> of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect①⑨">group effect</a> will speed up or slow down all
children.</p>
     <li data-md>
      <p>Changing the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#playback-direction" id="ref-for-playback-direction①">playback direction</a> of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⓪">group effect</a> will change the direction of all children.</p>
     <li data-md>
      <p>Applying a <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function" id="ref-for-easing-function②">timing function</a> to a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②①">group effect</a> will
affect the progress of all children.</p>
    </ul>
   </div>
   <h4 class="heading settled" data-level="3.8.2" id="the-start-time-of-children-of-a-group-effect"><span class="secno">3.8.2. </span><span class="content">The start time of
  children of a group effect</span><a class="self-link" href="#the-start-time-of-children-of-a-group-effect"></a></h4>
   <p>The <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑤">start time</a> of a <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect③">child
effect</a> of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②②">group effect</a> is zero.</p>
   <p>Note that specific types of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②③">group effects</a> may override
this definition to provide other kinds of synchronization behavior.</p>
   <h4 class="heading settled" data-level="3.8.3" id="the-intrinsic-iteration-duration-of-a-group-effect"><span class="secno">3.8.3. </span><span class="content">The intrinsic
  iteration duration of a group effect</span><a class="self-link" href="#the-intrinsic-iteration-duration-of-a-group-effect"></a></h4>
   <p>The <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration②">intrinsic iteration duration</a> of a <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②④">group
effect</a> is based on the time when the last <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect④">child effect</a> completes
its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①②">active interval</a> and depends on the
number of <span id="ref-for-child-effect⑤">child effects</span> as follows.</p>
   <div class="switch">
    <dl>
     <dt data-md>If the group has no <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect⑥">child effects</a>,
     <dd data-md>
      <p>the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration③">intrinsic iteration duration</a> is zero.</p>
     <dt data-md>Otherwise,
     <dd data-md>
      <ol>
       <li data-md>
        <p>Let <var>maximum end time</var> be the maximum value
after calculating the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time①">end time</a> of each <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect⑦">child
effect</a> in the group.</p>
       <li data-md>
        <p>The <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration④">intrinsic iteration duration</a> is the result of
evaluating <code>max(0, <var>maximum end
time</var>)</code>.</p>
      </ol>
    </dl>
   </div>
   <p>This definition of the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration⑤">intrinsic iteration duration</a> may be
overridden by specific types of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⑤">group effects</a>.</p>
   <h4 class="heading settled" data-level="3.8.4" id="sequence-effects"><span class="secno">3.8.4. </span><span class="content">Sequence effects</span><a class="self-link" href="#sequence-effects"></a></h4>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>Specific types of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⑥">group effects</a> can be used to provide
different kinds of synchronization behavior for their children.
This specification defines one additional type of <span id="ref-for-group-effect②⑦">group
effect</span>: a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect④">sequence effect</a>. <span id="ref-for-sequence-effect⑤">Sequence effects</span> arrange the start times of their
children so that they run one at a time, in turn.</p>
    <p>Compare the two arrangements illustrated below:</p>
    <figure>
      <img alt="Group effects and sequence effects." src="img/grouping-types.svg" width="600"> 
     <figcaption> Group effects and sequence effects.<br> (a) is a regular <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⑧">group effect</a> where all the children run
        simultaneously.<br> (b) is a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect⑥">sequence effect</a> where the children run in turn. </figcaption>
    </figure>
    <p>Since <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect②⑨">group effects</a> can also contain other <span id="ref-for-group-effect③⓪">group
effects</span>, complex synchronization is possible by combining
different types of groups as illustrated below.</p>
    <figure>
      <img alt="Nesting of group effects." src="img/grouping-nesting.svg" width="600"> 
     <figcaption> A <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect⑦">sequence effect</a> that contains a regular <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③①">group
    effect</a> as a child.<br> The <span id="ref-for-group-effect③②">group effect</span> waits for the previous child of the <span id="ref-for-sequence-effect⑧">sequence effect</span> to finish, and then the children of the <span id="ref-for-group-effect③③">group effect</span> play simultaneously.
    After they have finished the next child of the <span id="ref-for-sequence-effect⑨">sequence
    effect</span> plays. </figcaption>
    </figure>
   </div>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="sequence-effect">sequence effect</dfn> is a type of <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③④">group effect</a> that schedules its <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect⑧">child effects</a> such that they play in
turn following their order in the group.
This sequencing is achieved by adjusting the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑥">start time</a> of each <span id="ref-for-child-effect⑨">child
effect</span> in the group.</p>
   <h5 class="heading settled" data-level="3.8.4.1" id="the-start-time-of-children-of-a-sequence-effect"><span class="secno">3.8.4.1. </span><span class="content">The start time of
  children of a sequence effect</span><a class="self-link" href="#the-start-time-of-children-of-a-sequence-effect"></a></h5>
   <p>The <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑦">start time</a> of
a <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①⓪">child effect</a> of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⓪">sequence effect</a> is the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time②">end time</a> of the child’s <a data-link-type="dfn" href="#previous-sibling" id="ref-for-previous-sibling">previous sibling</a>.
If the child has no <span id="ref-for-previous-sibling①">previous sibling</span> the start time is zero.</p>
   <div class="note" role="note">
     When the <a data-link-type="dfn" href="#active-duration" id="ref-for-active-duration⑨">active duration</a> is positive infinity the behavior
for calculating the <a data-link-type="dfn" href="#end-time" id="ref-for-end-time③">end time</a> of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑥⑨">animation effect</a> and the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑧">start time</a> of
subsequent children follows the usual behavior defined by IEEE
754-2008.
As a result, if any of the children of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①①">sequence
effect</a> has an infinite <span id="ref-for-active-duration①⓪">active duration</span>, any children
that occur later in the sequence will not play. 
    <p>Similarly, the above definition does not restrict <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time①⑨">start times</a> to positive
values and hence some children may not play due to a negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⓪">start delay</a> on children that occur earlier in the group
since their <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①③">active interval</a> may end before the group’s <span id="ref-for-animation-effect-start-time②⓪">start time</span>.</p>
   </div>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>Because the start of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①④">active interval</a> is based on the
sum of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⓪">animation effect</a>’s <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②①">start time</a> <em>and</em> <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①①">start delay</a>, the <span id="ref-for-active-interval①⑤">active intervals</span> of
children of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①②">sequence effect</a> need not run in strict
sequence but can be shifted back and forth by using the <span id="ref-for-start-delay①②">start
delay</span> as shown in the following diagram.</p>
    <figure>
      <img alt="Using negative start delays to overlap children of seq
        groups" src="img/sequence-groups-and-start-delays.svg" width="600"> 
     <figcaption> Example of using the <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①③">start delay</a> on children of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①③">sequence effect</a> to shift their timing so that they
    overlap (a negative delay) or are spaced apart (a positive delay). </figcaption>
    </figure>
    <p>A negative <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①④">start delay</a> can be used to cause the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①⑥">active
interval</a> of two children to overlap.
Note that the <span id="ref-for-start-delay①⑤">start delay</span> affects the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②②">start time</a> of subsequent
children in the group.</p>
   </div>
   <h5 class="heading settled" data-level="3.8.4.2" id="the-intrinsic-iteration-duration-of-a-sequence-effect"><span class="secno">3.8.4.2. </span><span class="content">The intrinsic
  iteration duration of a sequence effect</span><a class="self-link" href="#the-intrinsic-iteration-duration-of-a-sequence-effect"></a></h5>
   <p>The <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration⑥">intrinsic iteration duration</a> of a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①④">sequence
effect</a> is equivalent to the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②③">start time</a> of a hypothetical <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①①">child effect</a> appended to the group’s children
calculated according to the definition in <a href="#the-start-time-of-children-of-a-sequence-effect">§ 3.8.4.1 The start time of
  children of a sequence effect</a> unless that produces a negative value, in
which case the <span id="ref-for-intrinsic-iteration-duration⑦">intrinsic iteration duration</span> is zero.</p>
   <p>As a result, if the <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⑤">sequence effect</a> has no <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①②">child
effects</a> the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration⑧">intrinsic iteration duration</a> will be
zero.</p>
   <h2 class="heading settled" data-level="4" id="animation-model"><span class="secno">4. </span><span class="content">Animation model</span><a class="self-link" href="#animation-model"></a></h2>
   <h3 class="heading settled" data-level="4.1" id="animation-types"><span class="secno">4.1. </span><span class="content">Animation types</span><a class="self-link" href="#animation-types"></a></h3>
   <h4 class="heading settled" data-level="4.1.1" id="not-animatable-section"><span class="secno">4.1.1. </span><span class="content">Not animatable</span><a class="self-link" href="#not-animatable-section"></a></h4>
   <p>Update the description of an effect that targets a non-animated property as:</p>
   <blockquote>
    <p>An <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦①">animation effect</a> that targets a property that is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#not-animatable" id="ref-for-not-animatable">not animatable</a> will still exhibit the
    usual behavior for an <span id="ref-for-animation-effect⑦②">animation effect</span> such as
    occupying time in a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⑥">sequence effect</a> and
    delaying the fulfilment of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①②">animation</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-finished-promise" id="ref-for-current-finished-promise">current finished
    promise</a>.</p>
   </blockquote>
   <h3 class="heading settled" data-level="4.2" id="keyframe-effects"><span class="secno">4.2. </span><span class="content">Keyframe Effects</span><a class="self-link" href="#keyframe-effects"></a></h3>
   <h4 class="heading settled" data-level="4.2.1" id="the-effect-value-of-a-keyframe-animation-effect"><span class="secno">4.2.1. </span><span class="content">The effect value of a keyframe effect</span><a class="self-link" href="#the-effect-value-of-a-keyframe-animation-effect"></a></h4>
   <p>The procedure for computing the <a data-link-type="dfn">effect value</a> of a single property
referenced by a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect②">keyframe effect</a> as one of its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-property" id="ref-for-target-property">target properties</a>,
for a given <var>iteration progress</var>, <var>current iteration</var> and <var>underlying value</var> is amended by inserting the following step
after the step to apply the keyframe effect composite mode.</p>
   <ol start="12">
    <li data-md>
     <p>For each <var>keyframe</var> in <var>interval endpoints</var>:</p>
     <ol>
      <li data-md>
       <p>(As in web-animations-1).</p>
      <li data-md>
       <p>If this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect③">keyframe effect</a> has an <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation">iteration
composite operation</a> of <a data-link-type="dfn" href="#iteration-composite-operation-accumulate" id="ref-for-iteration-composite-operation-accumulate">accumulate</a>,
apply the following step <var>current iteration</var> times:</p>
       <ul>
        <li data-md>
         <p>replace the property value of <var>target property</var> on <var>keyframe</var> with the result of combining the
property value on the final keyframe in <var>property-specific
keyframes</var> (<var>V</var><sub>a</sub>) with the
property value on <var>keyframe</var> (<var>V</var><sub>b</sub>) using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation">accumulation procedure</a> defined for <var>target property</var>.</p>
       </ul>
       <p class="note" role="note"><span>Note:</span> The order of arguments here is important. In the case where
      the animation type of the target property does not define a
      procedure for accumulation or addition, the default definition
      for these procedures result in <var>V</var><sub>b</sub> being
      returned. When performing iteration composition on propreties
      that do not support accumulation, the result should be the
      initial property value of <var>target property</var> on <var>keyframe</var>, hence we we make this <var>V</var><sub>b</sub> in the above step.</p>
     </ol>
   </ol>
   <h3 class="heading settled" data-level="4.3" id="combining-effects"><span class="secno">4.3. </span><span class="content">Combining effects</span><a class="self-link" href="#combining-effects"></a></h3>
   <h4 class="heading settled" data-level="4.3.1" id="the-effect-stack"><span class="secno">4.3.1. </span><span class="content">The effect stack</span><a class="self-link" href="#the-effect-stack"></a></h4>
   <p>The procedure for sorting effects appends the following step:</p>
   <blockquote>
    <ol>
     <li data-md>
      <p>Sort <var>A</var> and <var>B</var> in <a data-link-type="dfn" href="#tree-order" id="ref-for-tree-order">tree order</a>.
(By this point, <var>A</var> and <var>B</var> must have the
same <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①③">animation</a> since otherwise the order would have been
resolved in the previous step.)</p>
    </ol>
   </blockquote>
   <h3 class="heading settled" data-level="4.4" id="effect-accumulation-section"><span class="secno">4.4. </span><span class="content">Effect accumulation</span><a class="self-link" href="#effect-accumulation-section"></a></h3>
   <p>Similar to the compositing performed between <a data-link-type="dfn">effect values</a> (see <a href="https://www.w3.org/TR/web-animations-1/#effect-composition">Web Animations 1 §5.4.4 Effect composition</a>), the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iteration-composite-operation">iteration composite operation</dfn> determines how values are combined between successive iterations of
the same <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect④">keyframe effect</a>.</p>
   <p>This specification defines two <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation①">iteration composite operations</a> as follows:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="iteration composite operation replace" data-noexport id="iteration-composite-operation-replace">replace</dfn>
    <dd data-md>
     <p>Each successive iteration is calculated independently of previous
iterations.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="iteration composite operation accumulate" data-noexport id="iteration-composite-operation-accumulate">accumulate</dfn>
    <dd data-md>
     <p>Successive iterations of the animation are <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#accumulation" id="ref-for-accumulation①">accumulated</a> with the
final value of the previous iteration.</p>
     <p>The application of the <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation②">iteration composite operation</a> is
incorporated in the calculation of the <a data-link-type="dfn">effect value</a> in <a href="#the-effect-value-of-a-keyframe-animation-effect">§ 4.2.1 The effect value of a keyframe effect</a>.</p>
   </dl>
   <h3 class="heading settled" data-level="4.5" id="custom-effects"><span class="secno">4.5. </span><span class="content">Custom effects</span><a class="self-link" href="#custom-effects"></a></h3>
   <p>(This section is added.)</p>
   <p class="issue" id="issue-3b34db07"><a class="self-link" href="#issue-3b34db07"></a> This whole feature needs to be revisited. The current thinking is that
       rather than having custom effects, we should simply have an <code>onupdate</code> callback on each <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦③">animation effect</a>.  That
       would allow, for example, augmenting an existing effect with a function
       that performs logging or triggers additional actions at certain times.
       With the current arrangement, doing this would require adding a parent
       group just to achieve this.</p>
   <div class="informative-bg">
    <em>This section is non-normative</em> 
    <p>In some situations the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦④">animation
effects</a> provided by Web Animations may be insufficient.
For example, the <span id="ref-for-animation-effect⑦⑤">animation effects</span> defined here are only able to target certain CSS properties.
They are unable, therefore, to modify the <a href="https://www.w3.org/TR/SVG11/struct.html#__svg__SVGSVGElement__currentScale"><code>currentScale</code></a> property of an SVG element to smoothly zoom the viewport without
affecting the document content.</p>
    <p>In such cases, where the provided <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⑥">animation
effects</a> do not provide needed functionality, an effect defined by
script may be used.
Such <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑧">custom effects</a> receive an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑥">iteration
progress</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-iteration" id="ref-for-current-iteration">current iteration</a> from the timing model and
are responsible for producing an effect corresponding to the specified
time.</p>
    <p>Using an effect defined in script it is possible to animate not only
otherwise un-animatable attributes and properties, but potentially
anything that is accessible via script, including even producing audio
or creating vibrations.</p>
    <p>For example, using a <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect⑨">custom effect</a> that draws to a <a href="https://www.w3.org/TR/html5/scripting-1.html#the-canvas-element"><code>canvas</code></a> element, it is possible to produce a complex animated effect
featuring patterns that may be difficult to create using CSS or
SVG.
Compared to using <a href="https://www.w3.org/TR/animation-timing/">Timing control for
script-based animations</a>,
this approach ensures the animation is frame-rate
independent and can be paused, reversed, eased with timing effects,
accelerated, synchronized with other animations, and be controlled
in the same manner as any other Web Animations animation without any
additional programming.</p>
   </div>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="custom-effect">custom effect</dfn> is an author-defined programming callback
that is passed timing information as part of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events" id="ref-for-update-animations-and-send-events">update animations and send
events</a> procedure.</p>
   <p class="issue" id="issue-e49078ba"><a class="self-link" href="#issue-e49078ba"></a> It needs to be called whenever timing properties are updated too, right?</p>
   <h4 class="heading settled" data-level="4.5.1" id="updating-custom-effects"><span class="secno">4.5.1. </span><span class="content">Sampling custom effects</span><a class="self-link" href="#updating-custom-effects"></a></h4>
   <p><a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①⓪">Custom effects</a> are called for each referencing <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⑦">animation effect</a> when the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events" id="ref-for-update-animations-and-send-events①">update animations and send events</a> procedure is performed
(henceforth referred to simple as an <em>update</em>) based on
the following criteria.</p>
   <ol>
    <li data-md>
     <p>If, on the previous update, the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⑧">animation effect</a> referencing the <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①①">custom effect</a>:</p>
     <ul>
      <li data-md>
       <p>was <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect">in effect</a>, and</p>
      <li data-md>
       <p>referenced this same <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①②">custom effect</a>, and</p>
      <li data-md>
       <p>had a different <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-element" id="ref-for-target-element">target element</a></p>
     </ul>
     <p>Call the callback passing an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①⑤">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑦">iteration progress</a> and the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-element" id="ref-for-target-element①">target element</a> from the previous update as parameters to
the callback.</p>
    <li data-md>
     <p>Call the callback for the current <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-element" id="ref-for-target-element②">target element</a> based on
the first matching condition from the following:</p>
     <div class="switch">
      <dl>
       <dt data-md>If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑦⑨">animation effect</a> referencing the custom
effect is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect①">in effect</a> but was <span id="ref-for-in-effect②">in effect</span> in the previous
update,
       <dd data-md>
        <p>Call the callback passing an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved" id="ref-for-unresolved①⑥">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑧">iteration progress</a> and the current <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-element" id="ref-for-target-element③">target element</a> as parameters to the callback.</p>
       <dt data-md>Otherwise, if the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧⓪">animation effect</a> referencing
the custom effect:
       <dd data-md>
        <ul>
         <li data-md>
          <p><strong>is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect③">in effect</a>, and</strong></p>
         <li data-md>
          <p><strong>was not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect④">in effect</a> in the previous update, or
was <span id="ref-for-in-effect⑤">in effect</span> but with a different <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress⑨">iteration
progress</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-iteration" id="ref-for-current-iteration①">current iteration</a>,</strong></p>
        </ul>
       <dd data-md>
        <p>Call the callback passing with the referencing <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧①">animation effect</a>’s current <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress①⓪">iteration
progress</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-element" id="ref-for-target-element④">target element</a> as parameters to the callback.</p>
      </dl>
     </div>
   </ol>
   <div class="issue" id="issue-c3b02b8f">
    <a class="self-link" href="#issue-c3b02b8f"></a> There may be use cases where an action needs to be triggered at
a specific point in an animation tree.
In many cases this can be achieved by inserting a custom effect with
a step-start easing that spans the period during which the action
should be triggered.
However, this can impose additional layout requirements on the
content which might be cumbersome to accomodate. 
    <p>Some alternatives under consideration:</p>
    <ul>
     <li data-md>
      <p>Additional calling conditions could be defined to accommodate
zero-width custom effects. For example, it could be required
that the callback be called if (given infinite precision) there
was a time between the previous and current update times that
aligned with the custom effect.</p>
     <li data-md>
      <p>Instead of adding special calling conditions to custom effects,
a new type of animation effect, Trigger, could be introduced. The
trigger would only ever act as a zero-width custom effect as
described above, its constructor would take a callback function,
but not require a target or timing. It could also specify other
calling conventions, for example whether it should only trigger
in a specific playback direction.</p>
    </ul>
   </div>
   <h4 class="heading settled" data-level="4.5.2" id="execution-order-of-custom-effects"><span class="secno">4.5.2. </span><span class="content">Execution order of custom effects</span><a class="self-link" href="#execution-order-of-custom-effects"></a></h4>
   <p>Since <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①③">custom effects</a>, unlike <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧②">animation effects</a>, are not limited to
a single <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-property" id="ref-for-target-property①">target property</a>, the steps for assessing their
order of execution differs from <span id="ref-for-animation-effect⑧③">animation effects</span>.f</p>
   <p><a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①④">Custom effects</a> are executed after all <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧④">animation effects</a> have completed and
applied their result to their targets (see Applying the composited result).</p>
   <p class="issue" id="issue-df790f19"><a class="self-link" href="#issue-df790f19"></a> Need to define this more precisely.
    Are styles flushed?
    Presumably they are.
    Can we suspend reflow for the duration of executing the script-based
    animation effects and just do it once afterwards?</p>
   <p>Within the set of <a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①⑤">custom effects</a>, the
order of execution is the same as that defined for <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧⑤">animation effects</a> in <a href="#the-effect-stack">§ 4.3.1 The effect stack</a>.
Items sorted earlier are executed before those sorted later.</p>
   <h2 class="heading settled" data-level="5" id="programming-interface"><span class="secno">5. </span><span class="content">Programming interface</span><a class="self-link" href="#programming-interface"></a></h2>
   <h3 class="heading settled" data-level="5.1" id="the-animationtimeline-interface"><span class="secno">5.1. </span><span class="content">The <code>AnimationTimeline</code> interface</span><a class="self-link" href="#the-animationtimeline-interface"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline"><c- g>AnimationTimeline</c-></a> {
    <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①④"><c- n>Animation</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationtimeline-play" id="ref-for-dom-animationtimeline-play"><c- g>play</c-></a> (<c- b>optional</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animationtimeline-play-effect-effect" id="ref-for-dom-animationtimeline-play-effect-effect"><c- g>effect</c-></a> = <c- b>null</c->);
};
</pre>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationTimeline" data-dfn-type="method" data-export data-lt="play(effect)|play()" id="dom-animationtimeline-play"><code> Animation play(optional AnimationEffectReadOnly? effect = null)</code></dfn>
     <dd data-md>
      <p>Creates a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⑤">Animation</a></code> object associated with
this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline">timeline</a> that begins playback as soon as it is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#ready" id="ref-for-ready">ready</a>.</p>
      <p>If <var>effect</var> is specified, it will be used as the animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-effect" id="ref-for-target-effect⑧">target effect</a>.</p>
      <p class="issue" id="issue-6fb09aae"><a class="self-link" href="#issue-6fb09aae"></a> It has been suggested this method be renamed, or even removed
(see <a href="https://github.com/w3ctag/spec-reviews/blob/master/2013/10/Web%20Animations.md#issue-play-method">TAG
feedback</a>).</p>
      <p class="issue" id="issue-befeaed2"><a class="self-link" href="#issue-befeaed2"></a> Need to define the start behavior when <var>effect</var> is null.</p>
      <p>The new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⑥">Animation</a></code> object is created using the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-animation-animation" id="ref-for-dom-animation-animation">Animation()</a></code> constructor passing this <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline①">AnimationTimeline</a></code> object as the <var>timeline</var> parameter and <var>effect</var> as the <var>effect</var> parameter.</p>
      <p>Following construction of the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⑦">Animation</a></code> object, the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#play-an-animation" id="ref-for-play-an-animation①">play an animation</a> is performed on the newly constructed object
with the <var>auto-rewind</var> flag set to true.</p>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationTimeline/play(effect)" data-dfn-type="argument" data-export id="dom-animationtimeline-play-effect-effect"><code>effect</code></dfn>
        <dd data-md>
         <p>the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-effect" id="ref-for-target-effect⑨">target effect</a> to assign to the newly-created <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⑧">Animation</a></code> object.</p>
       </dl>
      </div>
    </dl>
   </div>
   <h3 class="heading settled" data-level="5.2" id="the-animation-interface"><span class="secno">5.2. </span><span class="content">The <code>Animation</code> interface</span><a class="self-link" href="#the-animation-interface"></a></h3>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①⑨">Animation</a> interface is amended to make the <var>timeline</var> member mutable:</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⓪"><c- g>Animation</c-></a> {
               <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline②"><c- n>AnimationTimeline</c-></a>?       <a class="idl-code" data-link-type="attribute" data-type="AnimationTimeline?" href="#dom-animation-timeline" id="ref-for-dom-animation-timeline"><c- g>timeline</c-></a>;
};
</pre>
   <div class="attributes">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="Animation" data-dfn-type="attribute" data-export id="dom-animation-timeline"><code>timeline</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline③">AnimationTimeline</a>, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①">timeline</a> associated with this animation.
Setting this attribute updates the object’s <span id="ref-for-timeline②">timeline</span> using
the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#set-the-timeline-of-an-animation" id="ref-for-set-the-timeline-of-an-animation">set the timeline of an animation</a>.</p>
    </dl>
    <h3 class="heading settled" data-level="5.3" id="the-animationeffectreadonly-interface"><span class="secno">5.3. </span><span class="content">The <code>AnimationEffectReadOnly</code> interface</span><a class="self-link" href="#the-animationeffectreadonly-interface"></a></h3>
    <p>The following paragraph is added:</p>
    <blockquote>
     <p>Interfaces that inherit from <code class="idl"><a data-link-type="idl">AnimationEffectReadOnly</a></code> that are intended
    to be mutable must also implement the additional <code class="idl"><a data-link-type="idl" href="#animationeffectmutable" id="ref-for-animationeffectmutable">AnimationEffectMutable</a></code> interface.</p>
    </blockquote>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>AnimationEffectReadOnly</c-></a> {
    // Timing hierarchy
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly"><c- n>GroupEffectReadOnly</c-></a>?     <a class="idl-code" data-link-type="attribute" data-readonly data-type="GroupEffectReadOnly?" href="#dom-animationeffectreadonly-parent" id="ref-for-dom-animationeffectreadonly-parent"><c- g>parent</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffectReadOnly?" href="#dom-animationeffectreadonly-previoussibling" id="ref-for-dom-animationeffectreadonly-previoussibling"><c- g>previousSibling</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffectReadOnly?" href="#dom-animationeffectreadonly-nextsibling" id="ref-for-dom-animationeffectreadonly-nextsibling"><c- g>nextSibling</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NoInterfaceObject" id="ref-for-NoInterfaceObject"><c- g>NoInterfaceObject</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animationeffectmutable"><code><c- g>AnimationEffectMutable</c-></code></dfn> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationeffectmutable-before" id="ref-for-dom-animationeffectmutable-before"><c- g>before</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <dfn class="idl-code" data-dfn-for="AnimationEffectMutable/before(...effects), AnimationEffectMutable/before()" data-dfn-type="argument" data-export id="dom-animationeffectmutable-before-effects-effects"><code><c- g>effects</c-></code><a class="self-link" href="#dom-animationeffectmutable-before-effects-effects"></a></dfn>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationeffectmutable-after" id="ref-for-dom-animationeffectmutable-after"><c- g>after</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <dfn class="idl-code" data-dfn-for="AnimationEffectMutable/after(...effects), AnimationEffectMutable/after()" data-dfn-type="argument" data-export id="dom-animationeffectmutable-after-effects-effects"><code><c- g>effects</c-></code><a class="self-link" href="#dom-animationeffectmutable-after-effects-effects"></a></dfn>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationeffectmutable-replace" id="ref-for-dom-animationeffectmutable-replace"><c- g>replace</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <dfn class="idl-code" data-dfn-for="AnimationEffectMutable/replace(...effects), AnimationEffectMutable/replace()" data-dfn-type="argument" data-export id="dom-animationeffectmutable-replace-effects-effects"><code><c- g>effects</c-></code><a class="self-link" href="#dom-animationeffectmutable-replace-effects-effects"></a></dfn>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationeffectmutable-remove" id="ref-for-dom-animationeffectmutable-remove"><c- g>remove</c-></a> ();
};
</pre>
    <div class="attributes">
     <dl>
      <dt data-md><dfn class="idl-code" data-dfn-for="AnimationEffectReadOnly" data-dfn-type="method" data-export id="dom-animationeffectreadonly-getcomputedtiming"><code>getComputedTiming()</code><a class="self-link" href="#dom-animationeffectreadonly-getcomputedtiming"></a></dfn>
      <dd data-md>
       <p>The description of the <code>duration</code> attribute of the object
needs to indicate that if <code>timing.duration</code> is the string <code>auto</code>, this attribute will return
the current calculated value of the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration⑨">intrinsic iteration duration</a>.</p>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectReadOnly" data-dfn-type="attribute" data-export id="dom-animationeffectreadonly-parent"><code>parent</code></dfn>, <span> of type <a data-link-type="idl-name" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly①">GroupEffectReadOnly</a>, readonly, nullable</span>
      <dd data-md>
       <p>The <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②③">parent group</a> of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧⑥">animation effect</a> or <code>null</code> if this <span id="ref-for-animation-effect⑧⑦">animation effect</span> does not have
a <span id="ref-for-parent-group②④">parent group</span>.</p>
       <p class="issue" id="issue-40288bfc"><a class="self-link" href="#issue-40288bfc"></a> Should this be <code>parentGroup</code>?</p>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectReadOnly" data-dfn-type="attribute" data-export id="dom-animationeffectreadonly-previoussibling"><code>previousSibling</code></dfn>, <span> of type <a data-link-type="idl-name">AnimationEffectReadOnly</a>, readonly, nullable</span>
      <dd data-md>
       <p>The <a data-link-type="dfn" href="#previous-sibling" id="ref-for-previous-sibling②">previous sibling</a> of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧⑧">animation effect</a>.</p>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectReadOnly" data-dfn-type="attribute" data-export id="dom-animationeffectreadonly-nextsibling"><code>nextSibling</code></dfn>, <span> of type <a data-link-type="idl-name">AnimationEffectReadOnly</a>, readonly, nullable</span>
      <dd data-md>
       <p>The <a data-link-type="dfn" href="#next-sibling" id="ref-for-next-sibling">next sibling</a> of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑧⑨">animation effect</a>.</p>
     </dl>
    </div>
    <div class="methods">
     <dl>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectMutable" data-dfn-type="method" data-export data-lt="before(...effects)|before()" id="dom-animationeffectmutable-before"><code> void before (AnimationEffectReadOnly... effects)</code></dfn>
      <dd data-md>
       <p>Inserts <var>effects</var> before this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⓪">animation effect</a>.</p>
       <ol>
        <li data-md>
         <p>If there is no <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑤">parent group</a>, abort these steps.</p>
        <li data-md>
         <p>If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨①">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor">inclusive ancestor</a> of this <span id="ref-for-animation-effect⑨②">animation effect</span>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a <span class="exceptionname">HierarchyRequestError</span> exception and abort these steps.</p>
        <li data-md>
         <p><a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children">Insert</a> <var>effects</var> before
this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨③">animation effect</a>.</p>
       </ol>
       <div class="note" role="note">
         Note that this definition precludes the following usage since <code>effect</code> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor①">inclusive ancestor</a> of itself: 
<pre class="lang-javascript highlight">effect<c- p>.</c->before<c- p>(</c->effect<c- p>);</c-> <c- c1>// throws HierarchyRequestError</c-></pre>
       </div>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectMutable" data-dfn-type="method" data-export data-lt="after(...effects)|after()" id="dom-animationeffectmutable-after"><code> void after(AnimationEffectReadOnly... effects)</code></dfn>
      <dd data-md>
       <p>Inserts <var>effects</var> after this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨④">animation effect</a>.</p>
       <ol>
        <li data-md>
         <p>If there is no <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑥">parent group</a>, abort these steps.</p>
        <li data-md>
         <p>If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⑤">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor②">inclusive ancestor</a> of this <span id="ref-for-animation-effect⑨⑥">animation effect</span>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> a <span class="exceptionname">HierarchyRequestError</span> exception and abort these steps.</p>
        <li data-md>
         <p>Let <var>reference child</var> be the <a data-link-type="dfn" href="#next-sibling-not-included" id="ref-for-next-sibling-not-included">next sibling of
this animation effect not in <var>effects</var></a>.</p>
        <li data-md>
         <p><a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children①">Insert</a> <var>effects</var> before <var>reference child</var>.</p>
       </ol>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectMutable" data-dfn-type="method" data-export data-lt="replace(...effects)|replace()" id="dom-animationeffectmutable-replace"><code> void replace(AnimationEffectReadOnly... effects)</code></dfn>
      <dd data-md>
       <p>Replaces this <code class="idl"><a data-link-type="idl">AnimationEffectReadOnly</a></code> with the passed in <var>effects</var>.</p>
       <ol>
        <li data-md>
         <p>If there is no <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑦">parent group</a>, abort these steps.</p>
        <li data-md>
         <p>If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⑦">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor③">inclusive ancestor</a> of the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑧">parent group</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw②">throw</a> a <span class="exceptionname">HierarchyRequestError</span> exception and abort these steps.</p>
        <li data-md>
         <p>Let <var>reference child</var> be the <a data-link-type="dfn" href="#next-sibling-not-included" id="ref-for-next-sibling-not-included①">next sibling of
this animation effect not in <var>effects</var></a>.</p>
        <li data-md>
         <p><a data-link-type="dfn" href="#remove-an-animation-effect" id="ref-for-remove-an-animation-effect①">Remove</a> this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⑧">animation effect</a> from its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group②⑨">parent group</a>.</p>
        <li data-md>
         <p><a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children②">Insert</a> <var>effects</var> before <var>reference child</var>.</p>
       </ol>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectMutable" data-dfn-type="method" data-export data-lt="remove()" id="dom-animationeffectmutable-remove"><code>void remove()</code></dfn>
      <dd data-md>
       <p><a data-link-type="dfn" href="#remove-an-animation-effect" id="ref-for-remove-an-animation-effect②">Removes</a> this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect⑨⑨">animation
effect</a> from its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③⓪">parent group</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②①">animation</a>.</p>
     </dl>
    </div>
    <p class="issue" id="issue-49ccd991"><a class="self-link" href="#issue-49ccd991"></a> The <code>remove()</code> method can be used to remove an effect from
either its parent group or animation. Should we keep it in level 1 and define it
simply as removing the animation from its animation?</p>
    <h3 class="heading settled" data-level="5.4" id="the-animationeffecttimingreadonly-interface"><span class="secno">5.4. </span><span class="content">The <code>AnimationEffectTimingReadOnly</code> interface</span><a class="self-link" href="#the-animationeffecttimingreadonly-interface"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>AnimationEffectTimingReadOnly</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-animationeffecttimingreadonly-playbackrate" id="ref-for-dom-animationeffecttimingreadonly-playbackrate"><c- g>playbackRate</c-></a>;
};
</pre>
    <div class="attributes">
     <dl>
      <dt data-md><dfn data-dfn-type="dfn" data-noexport id="delay">delay<a class="self-link" href="#delay"></a></dfn>
      <dd data-md>
       <p>Update the description as:</p>
       <blockquote>
        <p>The <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑥">start delay</a> which represents the number of milliseconds from an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⓪">animation effect</a>’s <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②④">start
time</a> to the start of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①⑦">active interval</a>.</p>
       </blockquote>
      <dt data-md><dfn data-dfn-type="dfn" data-noexport id="enddelay">endDelay<a class="self-link" href="#enddelay"></a></dfn>
      <dd data-md>
       <p>Update the description as:</p>
       <blockquote>
        <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay③">end delay</a> which represents the number of milliseconds
from the end of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪①">animation effect</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①⑧">active interval</a> until the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②⑤">start time</a> of any <span id="ref-for-animation-effect①⓪②">animation effect</span> that may
follow, for example, in a <a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⑦">sequence effect</a>.</p>
       </blockquote>
     </dl>
    </div>
    <dt data-md><dfn data-dfn-type="dfn" data-noexport id="duration">duration<a class="self-link" href="#duration"></a></dfn>
    <dd data-md>
     <p>Add:</p>
     <blockquote>
      <p>The string value <code>auto</code> is used to indicate that the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①①">iteration duration</a> reflects the animation effect’s <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration①⓪">intrinsic iteration duration</a>.</p>
     </blockquote>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectTimingReadOnly" data-dfn-type="attribute" data-export id="dom-animationeffecttimingreadonly-playbackrate"><code>playbackRate</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①">double</a>, readonly</span>
    <dd data-md>
     <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪③">animation effect</a>’s <a data-link-type="dfn" href="#animation-effect-playback-rate" id="ref-for-animation-effect-playback-rate②⓪">playback rate</a> property
which is a multiplier applied to the <a data-link-type="dfn" href="#local-time" id="ref-for-local-time①⑦">local time</a> potentially
causing the effect to run at a different rate to its natural speed.</p>
   </div>
   <h3 class="heading settled" data-level="5.5" id="the-animationeffecttiming-interface"><span class="secno">5.5. </span><span class="content">The <code>AnimationEffectTiming</code> interface</span><a class="self-link" href="#the-animationeffecttiming-interface"></a></h3>
   <p>Update the description to refer to the group/sequence effects:</p>
   <blockquote>
    <p>The <code class="idl"><a data-link-type="idl">AnimationEffectTiming</a></code> interface is a mutable subclass of <code class="idl"><a data-link-type="idl">AnimationEffectTimingReadOnly</a></code> returned for the <code>timing</code> attribute of a mutable <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪④">animation effect</a> such as <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#keyframeeffect" id="ref-for-keyframeeffect">KeyframeEffect</a></code>, <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect">GroupEffect</a></code>, or <code class="idl"><a data-link-type="idl" href="#sequenceeffect" id="ref-for-sequenceeffect">SequenceEffect</a></code>.</p>
   </blockquote>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>AnimationEffectTiming</c-></a> : <a class="n" data-link-type="idl-name"><c- n>AnimationEffectTimingReadOnly</c-></a> {
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="attribute" data-type="double" href="#dom-animationeffecttiming-playbackrate" id="ref-for-dom-animationeffecttiming-playbackrate"><c- g>playbackRate</c-></a>;
};
</pre>
   <div class="attributes">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectTiming" data-dfn-type="attribute" data-export id="dom-animationeffecttiming-playbackrate"><code>playbackRate</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③">double</a></span>
     <dd data-md>
      <p>See the <code class="idl"><a data-link-type="idl" href="#dom-animationeffecttimingreadonly-playbackrate" id="ref-for-dom-animationeffecttimingreadonly-playbackrate①">playbackRate</a></code> attribute of the <code class="idl"><a data-link-type="idl">AnimationEffectTimingReadOnly</a></code> interface.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="5.6" id="the-animationeffecttimingproperties-dictionary"><span class="secno">5.6. </span><span class="content">The <code>AnimationEffectTimingProperties</code> dictionary</span><a class="self-link" href="#the-animationeffecttimingproperties-dictionary"></a></h3>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary"><c- g>AnimationEffectTimingProperties</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a> <a class="idl-code" data-default="1.0" data-link-type="dict-member" data-type="double " href="#dom-animationeffecttimingproperties-playbackrate" id="ref-for-dom-animationeffecttimingproperties-playbackrate"><c- g>playbackRate</c-></a> = 1.0;
};
</pre>
   <div class="members">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationEffectTimingProperties" data-dfn-type="dict-member" data-export id="dom-animationeffecttimingproperties-playbackrate"><code>playbackRate</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤">double</a>, defaulting to <code>1.0</code></span>
     <dd data-md>
      <p>See the <code class="idl"><a data-link-type="idl" href="#dom-animationeffecttiming-playbackrate" id="ref-for-dom-animationeffecttiming-playbackrate①">playbackRate</a></code> attribute
of the <code class="idl"><a data-link-type="idl">AnimationEffectTiming</a></code> interface.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="5.7" id="the-computedtimingproperties-dictionary"><span class="secno">5.7. </span><span class="content">The <code>ComputedTimingProperties</code> dictionary</span><a class="self-link" href="#the-computedtimingproperties-dictionary"></a></h3>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary"><c- g>ComputedTimingProperties</c-></a> : <a class="n" data-link-type="idl-name"><c- n>AnimationEffectTimingProperties</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-computedtimingproperties-starttime" id="ref-for-dom-computedtimingproperties-starttime"><c- g>startTime</c-></a>;
};
</pre>
   <div class="members">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="ComputedTimingProperties" data-dfn-type="dict-member" data-export id="dom-computedtimingproperties-starttime"><code>startTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑦">double</a></span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②⑥">start time</a> of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⑤">animation effect</a> in milliseconds.
This is the time at which the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③①">parent group</a>, if
any, has scheduled this child to run within its <a data-link-type="dfn" href="#transformed-time" id="ref-for-transformed-time⑨">transformed time space</a>, that is, the <span id="ref-for-animation-effect①⓪⑥">animation effect</span>’s <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time①①">inherited time
space</a>.</p>
      <p>The start of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#active-interval" id="ref-for-active-interval①⑨">active interval</a> is based on the sum of
the <a data-link-type="dfn" href="#animation-effect-start-time" id="ref-for-animation-effect-start-time②⑦">start time</a> and <a data-link-type="dfn" href="#start-delay" id="ref-for-start-delay①⑦">start delay</a>.</p>
     <dt data-md><dfn data-dfn-type="dfn" data-noexport id="endtime">endTime<a class="self-link" href="#endtime"></a></dfn>
     <dd data-md>
      <p>Update the description as:</p>
      <blockquote>
       <p>The <a data-link-type="dfn" href="#end-time" id="ref-for-end-time④">end time</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⑦">animation effect</a> expressed
in milliseconds in <a data-link-type="dfn" href="#inherited-time" id="ref-for-inherited-time①②">inherited time
space</a>.</p>
      </blockquote>
      <blockquote>
       <p>This corresponds to the end of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⑧">animation effect</a>’s active
interval plus any <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#end-delay" id="ref-for-end-delay④">end delay</a>.</p>
      </blockquote>
     <dt data-md><dfn data-dfn-type="dfn" data-noexport id="localtime">localTime<a class="self-link" href="#localtime"></a></dfn>
     <dd data-md>
      <p>Update the second paragraph as:</p>
      <blockquote>
       <p>This will be <code>null</code> if this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①⓪⑨">animation effect</a> is not <a data-link-type="dfn" href="#associated-with-an-animation" id="ref-for-associated-with-an-animation①">associated with an animation</a> or if it has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③②">parent group</a> that is not <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#in-effect" id="ref-for-in-effect⑥">in effect</a>.</p>
      </blockquote>
    </dl>
   </div>
   <h4 class="heading settled" data-level="5.7.1" id="the-fillmode-enumeration"><span class="secno">5.7.1. </span><span class="content">The <code>FillMode</code> enumeration</span><a class="self-link" href="#the-fillmode-enumeration"></a></h4>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="idl-code" data-dfn-type="enum" data-export id="enumdef-fillmode"><code><c- g>FillMode</c-></code><a class="self-link" href="#enumdef-fillmode"></a></dfn> { <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-none"><code><c- s>"none"</c-></code><a class="self-link" href="#dom-fillmode-none"></a></dfn>, <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-forwards"><code><c- s>"forwards"</c-></code><a class="self-link" href="#dom-fillmode-forwards"></a></dfn>, <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-backwards"><code><c- s>"backwards"</c-></code><a class="self-link" href="#dom-fillmode-backwards"></a></dfn>, <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-both"><code><c- s>"both"</c-></code><a class="self-link" href="#dom-fillmode-both"></a></dfn>, <dfn class="idl-code" data-dfn-for="FillMode" data-dfn-type="enum-value" data-export id="dom-fillmode-auto"><code><c- s>"auto"</c-></code><a class="self-link" href="#dom-fillmode-auto"></a></dfn> };
</pre>
   <dl>
    <dt data-md><code>auto</code>
    <dd data-md>
     <p>Update the description as:</p>
     <blockquote>
      <p>Fill backwards and forwards when applied to an <code class="idl"><a data-link-type="idl" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly②">GroupEffectReadOnly</a></code> and no fill when applied to an <code class="idl"><a data-link-type="idl">KeyframeEffectReadOnly</a></code>.</p>
     </blockquote>
   </dl>
   <h3 class="heading settled" data-level="5.8" id="the-animationgroup-interfaces"><span class="secno">5.8. </span><span class="content">The <code>GroupEffectReadOnly</code> and <code>GroupEffect</code> interfaces</span><a class="self-link" href="#the-animationgroup-interfaces"></a></h3>
   <p>(This section is added.)</p>
   <p><a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③⑤">Group effects</a> are represented by the <code class="idl"><a data-link-type="idl" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly③">GroupEffectReadOnly</a></code> interface.
Mutable <span id="ref-for-group-effect③⑥">group effects</span> are represented by the <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect①">GroupEffect</a></code> interface.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 Constructor (sequence? children,
              optional (unrestricted double or AnimationEffectTimingProperties) timing)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="groupeffectreadonly"><code><c- g>GroupEffectReadOnly</c-></code></dfn> : <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#animationnodelist" id="ref-for-animationnodelist"><c- n>AnimationNodeList</c-></a>      <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationNodeList" href="#dom-groupeffectreadonly-children" id="ref-for-dom-groupeffectreadonly-children"><c- g>children</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffectReadOnly?" href="#dom-groupeffectreadonly-firstchild" id="ref-for-dom-groupeffectreadonly-firstchild"><c- g>firstChild</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffectReadOnly?" href="#dom-groupeffectreadonly-lastchild" id="ref-for-dom-groupeffectreadonly-lastchild"><c- g>lastChild</c-></a>;
    <a class="n" data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect②"><c- n>GroupEffect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-groupeffectreadonly-clone" id="ref-for-dom-groupeffectreadonly-clone"><c- g>clone</c-></a> ();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NoInterfaceObject" id="ref-for-NoInterfaceObject①"><c- g>NoInterfaceObject</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="groupeffectmutable"><code><c- g>GroupEffectMutable</c-></code></dfn> {
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-groupeffectmutable-prepend" id="ref-for-dom-groupeffectmutable-prepend"><c- g>prepend</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <dfn class="idl-code" data-dfn-for="GroupEffectMutable/prepend(...effects), GroupEffectMutable/prepend()" data-dfn-type="argument" data-export id="dom-groupeffectmutable-prepend-effects-effects"><code><c- g>effects</c-></code><a class="self-link" href="#dom-groupeffectmutable-prepend-effects-effects"></a></dfn>);
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-groupeffectmutable-append" id="ref-for-dom-groupeffectmutable-append"><c- g>append</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <dfn class="idl-code" data-dfn-for="GroupEffectMutable/append(...effects), GroupEffectMutable/append()" data-dfn-type="argument" data-export id="dom-groupeffectmutable-append-effects-effects"><code><c- g>effects</c-></code><a class="self-link" href="#dom-groupeffectmutable-append-effects-effects"></a></dfn>);
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 Constructor (sequence? children,
              optional (unrestricted double or AnimationEffectTimingProperties) timing)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="groupeffect"><code><c- g>GroupEffect</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly④"><c- n>GroupEffectReadOnly</c-></a> {
};
<a class="n" data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect③"><c- n>GroupEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#animationeffectmutable" id="ref-for-animationeffectmutable①"><c- n>AnimationEffectMutable</c-></a>;
<a class="n" data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect④"><c- n>GroupEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#groupeffectmutable" id="ref-for-groupeffectmutable"><c- n>GroupEffectMutable</c-></a>;
</pre>
   <div class="constructors">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffectReadOnly" data-dfn-type="constructor" data-export data-lt="GroupEffectReadOnly(children, timing)" id="dom-groupeffectreadonly-groupeffectreadonly"><code> GroupEffectReadOnly ()</code></dfn>
     <dd data-md>
      <p>Creates a new <code class="idl"><a data-link-type="idl" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly⑤">GroupEffectReadOnly</a></code> object using the following
procedure:</p>
      <ol>
       <li data-md>
        <p>Create a new <code class="idl"><a data-link-type="idl" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly⑥">GroupEffectReadOnly</a></code> object, <var>group</var>.</p>
       <li data-md>
        <p>Let <var>timing input</var> be the result of applying the
procedure to <a data-link-type="dfn" href="#process-a-timing-argument" id="ref-for-process-a-timing-argument">process a timing argument</a> to <code class="idl"><a data-link-type="idl" href="#dom-groupeffectreadonly-groupeffectreadonly-children-timing-timing" id="ref-for-dom-groupeffectreadonly-groupeffectreadonly-children-timing-timing">timing</a></code>.</p>
       <li data-md>
        <p>Set <code><var>group</var>.timing</code> to a new <code class="idl"><a data-link-type="idl">AnimationEffectTimingReadOnly</a></code> object created in the <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-execution-contexts" id="ref-for-sec-execution-contexts">current realm</a> (that is, the same <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-code-realms" id="ref-for-sec-code-realms">realm</a> used to create <var>effect</var>)
whose attributes are assigned the value of the member of the same name
on <var>timing input</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children③">Insert</a> <code class="idl"><a data-link-type="idl" href="#dom-groupeffectreadonly-groupeffectreadonly-children-timing-children" id="ref-for-dom-groupeffectreadonly-groupeffectreadonly-children-timing-children">children</a></code> before <code>null</code>.</p>
      </ol>
      <div class="parameters">
       <dl>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffectReadOnly/GroupEffectReadOnly(children, timing)" data-dfn-type="argument" data-export id="dom-groupeffectreadonly-groupeffectreadonly-children-timing-children"><code>children</code></dfn>
        <dd data-md>
         <p>A sequence of animation effects to add as children of this group.</p>
         <p>These children are appended in sequence using the same
semantics as the <code class="idl"><a data-link-type="idl" href="#dom-groupeffectmutable-append" id="ref-for-dom-groupeffectmutable-append①">append()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#groupeffectmutable" id="ref-for-groupeffectmutable①">GroupEffectMutable</a></code> interface.</p>
        <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffectReadOnly/GroupEffectReadOnly(children, timing)" data-dfn-type="argument" data-export id="dom-groupeffectreadonly-groupeffectreadonly-children-timing-timing"><code>timing</code></dfn>
        <dd data-md>
         <p>The timing properties or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-duration" id="ref-for-iteration-duration①②">iteration duration</a> of the new
group effect.</p>
       </dl>
      </div>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffect" data-dfn-type="constructor" data-export data-lt="GroupEffect(children, timing)" id="dom-groupeffect-groupeffect"><code> GroupEffect ()</code></dfn>
     <dd data-md>
      <p>Creates a new <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect⑤">GroupEffect</a></code> object using the same procedure as with
the <code class="idl"><a data-link-type="idl" href="#dom-groupeffectreadonly-groupeffectreadonly" id="ref-for-dom-groupeffectreadonly-groupeffectreadonly">GroupEffectReadOnly()</a></code> constructor with the following differences:</p>
      <ul>
       <li data-md>
        <p><var>group</var> is initialized to a new <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect⑥">GroupEffect</a></code> object
rather than a new <code class="idl"><a data-link-type="idl" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly⑦">GroupEffectReadOnly</a></code> object.</p>
       <li data-md>
        <p><code><var>group</var>.timing</code> is set to a new <code class="idl"><a data-link-type="idl">AnimationEffectTiming</a></code> object rather than a new <code class="idl"><a data-link-type="idl">AnimationEffectTimingReadOnly</a></code> object.</p>
      </ul>
    </dl>
   </div>
   <div class="attributes">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffectReadOnly" data-dfn-type="attribute" data-export id="dom-groupeffectreadonly-children"><code>children</code></dfn>, <span> of type <a data-link-type="idl-name" href="#animationnodelist" id="ref-for-animationnodelist①">AnimationNodeList</a>, readonly</span>
     <dd data-md>
      <p>The list of <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①③">child effects</a> in the group.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffectReadOnly" data-dfn-type="attribute" data-export id="dom-groupeffectreadonly-firstchild"><code>firstChild</code></dfn>, <span> of type <a data-link-type="idl-name">AnimationEffectReadOnly</a>, readonly, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#first-child" id="ref-for-first-child">first child</a> of this <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③⑦">group effect</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffectReadOnly" data-dfn-type="attribute" data-export id="dom-groupeffectreadonly-lastchild"><code>lastChild</code></dfn>, <span> of type <a data-link-type="idl-name">AnimationEffectReadOnly</a>, readonly, nullable</span>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#last-child" id="ref-for-last-child">last child</a> of this <a data-link-type="dfn" href="#group-effect" id="ref-for-group-effect③⑧">group effect</a>.</p>
    </dl>
   </div>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffectMutable" data-dfn-type="method" data-export data-lt="prepend(...effects)|prepend()" id="dom-groupeffectmutable-prepend"><code></code></dfn>
     <dt data-md>void prepend (AnimationEffectReadOnly... effects)
     <dd data-md>
      <ol>
       <li data-md>
        <p>If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⓪">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor④">inclusive ancestor</a> of this <span id="ref-for-animation-effect①①①">animation effect</span>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw③">throw</a> a <span class="exceptionname">HierarchyRequestError</span> exception and abort these steps.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children④">Insert</a> <var>effects</var> before
the <a data-link-type="dfn" href="#first-child" id="ref-for-first-child①">first child</a>.</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffectMutable" data-dfn-type="method" data-export data-lt="append(...effects)|append()" id="dom-groupeffectmutable-append"><code> void append (AnimationEffectReadOnly... effects)</code></dfn>
     <dd data-md>
      <ol>
       <li data-md>
        <p>If any of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①②">animation effects</a> in <var>effects</var> is an <a data-link-type="dfn" href="#inclusive-ancestor" id="ref-for-inclusive-ancestor⑤">inclusive ancestor</a> of this <span id="ref-for-animation-effect①①③">animation effect</span>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw④">throw</a> a <span class="exceptionname">HierarchyRequestError</span> exception and abort these steps.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#insert-children" id="ref-for-insert-children⑤">Insert</a> <var>effects</var> before <code>null</code>.</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="GroupEffectReadOnly" data-dfn-type="method" data-export data-lt="clone()" id="dom-groupeffectreadonly-clone"><code> GroupEffect clone ()</code></dfn>
     <dd data-md>
      <p>Creates a deep copy of this <code class="idl"><a data-link-type="idl" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly⑧">GroupEffectReadOnly</a></code> object using the
following procedure.</p>
      <ol>
       <li data-md>
        <p>Let <var>source</var> be this <code class="idl"><a data-link-type="idl" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly⑨">GroupEffectReadOnly</a></code> object,
the object to be cloned.</p>
       <li data-md>
        <p>Let <var>cloned timing</var> be a new <code class="idl"><a data-link-type="idl">AnimationEffectTimingProperties</a></code> object whose members are assigned
the value of the attribute with the same name on <code><var>source</var>.timing</code>.</p>
       <li data-md>
        <p>Let <var>cloned children</var> be an empty sequence of <code class="idl"><a data-link-type="idl">AnimationEffectReadOnly</a></code> objects.</p>
       <li data-md>
        <p>For each <var>child</var> in <code><var>source</var>.children</code>, append the result
of calling <code><var>child</var>.clone()</code> to <var>cloned children</var>.</p>
       <li data-md>
        <p>Return a new <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect⑦">GroupEffect</a></code> object created by
calling the <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-groupeffect" id="ref-for-dom-groupeffect-groupeffect">GroupEffect()</a></code> constructor with parameters <code>GroupEffect(<var>cloned children</var>, <var>cloned timing</var>)</code>.</p>
      </ol>
    </dl>
   </div>
   <h4 class="heading settled" data-level="5.8.1" id="processing-a-timing-argument"><span class="secno">5.8.1. </span><span class="content">Processing a <code>timing</code> argument</span><a class="self-link" href="#processing-a-timing-argument"></a></h4>
   <p>The <var>timing</var> parameter passed to the <code class="idl"><a data-link-type="idl" href="#dom-groupeffectreadonly-groupeffectreadonly" id="ref-for-dom-groupeffectreadonly-groupeffectreadonly①">GroupEffectReadOnly()</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-groupeffect" id="ref-for-dom-groupeffect-groupeffect①">GroupEffect()</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-sequenceeffectreadonly-sequenceeffectreadonly" id="ref-for-dom-sequenceeffectreadonly-sequenceeffectreadonly">SequenceEffectReadOnly()</a></code>, or <code class="idl"><a data-link-type="idl" href="#dom-sequenceeffect-sequenceeffect" id="ref-for-dom-sequenceeffect-sequenceeffect">SequenceEffect()</a></code> constructor may be an <code class="idl"><a data-link-type="idl">AnimationEffectTimingProperties</a></code> object, a double
representing the duration of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①④">animation effect</a> in milliseconds, or
undefined.</p>
   <p>The following procedure to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="process-a-timing-argument">process a timing argument</dfn>, <var>timing</var>, normalizes the above inputs into
a <code class="idl"><a data-link-type="idl">AnimationEffectTimingProperties</a></code> object.</p>
   <dl>
    <dt data-md>If <var>timing</var> is an <code class="idl"><a data-link-type="idl">AnimationEffectTimingProperties</a></code> object,
    <dd data-md>
     <p>Return <var>timing</var>.</p>
    <dt data-md>If <var>timing</var> is a <code>double</code>,
    <dd data-md>
     <p>Return a new <code class="idl"><a data-link-type="idl">AnimationEffectTimingProperties</a></code> object with all members set
to their default values and <code class="idl"><a data-link-type="idl">duration</a></code> set
to <var>timing</var>.</p>
    <dt data-md>Otherwise (<var>timing</var> is undefined),
    <dd data-md>
     <p>Return a new <code class="idl"><a data-link-type="idl">AnimationEffectTimingProperties</a></code> object with all members set
to their default values.</p>
   </dl>
   <div class="note" role="note">
    <p>Note that since <code class="idl"><a data-link-type="idl">AnimationEffectTimingReadOnly</a></code> objects have the same
member keys as <code class="idl"><a data-link-type="idl">AnimationEffectTimingProperties</a></code> dictionaries, it is
also possible to pass the <code class="idl"><a data-link-type="idl">timing</a></code> member of another <code class="idl"><a data-link-type="idl">AnimationEffectReadOnly</a></code> to the any of the methods that invoke this method
as the <var>timing</var> parameter.</p>
    <p>Doing so will cause the <code class="idl"><a data-link-type="idl">AnimationEffectTimingReadOnly</a></code> object to be
treated as an <code class="idl"><a data-link-type="idl">AnimationEffectTimingProperties</a></code> dictionary and thus it
will effectively be cloned, not shared.</p>
    <div class="example" id="example-dc5ff846">
     <a class="self-link" href="#example-dc5ff846"></a> 
     <p>For example, the timing of two animations may be aligned as follows:</p>
<pre class="lang-javascript highlight"><c- a>var</c-> effectA <c- o>=</c-> elem<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- mi>0</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>).</c->effect<c- p>;</c->
<c- a>var</c-> effectB <c- o>=</c-> elem<c- p>.</c->animate<c- p>({</c-> width<c- o>:</c-> <c- t>'0px'</c-> <c- p>},</c-> effectA<c- p>.</c->timing<c- p>).</c->effect<c- p>;</c->
alert<c- p>(</c->effectA<c- p>.</c->timing <c- o>!==</c-> effectB<c- p>.</c->timing<c- p>);</c-> <c- c1>// Displays 'true'</c->
alert<c- p>(</c->effectA<c- p>.</c->timing<c- p>.</c->duration <c- o>===</c-> effectB<c- p>.</c->timing<c- p>.</c->duration<c- p>);</c-> <c- c1>// Displays 'true'</c-></pre>
    </div>
   </div>
   <h4 class="heading settled" data-level="5.8.2" id="definitions-for-manipulating-hierarchies"><span class="secno">5.8.2. </span><span class="content">Definitions for manipulating hierarchies</span><a class="self-link" href="#definitions-for-manipulating-hierarchies"></a></h4>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="next sibling not included" data-noexport id="next-sibling-not-included">next sibling of <var>effect</var> not included</dfn> in a set of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⑤">animation
effects</a>, <var>effects</var> is determined using the following
teps:</p>
   <p></p>
   <ol>
    <li data-md>
     <p>Let <var>context effect</var> be <var>effect</var>.</p>
    <li data-md>
     <p>While the <a data-link-type="dfn" href="#next-sibling" id="ref-for-next-sibling①">next sibling</a> of <var>context effect</var> is not <code>null</code> perform the following steps:</p>
     <ol>
      <li data-md>
       <p>Let <var>context effect</var> be the <a data-link-type="dfn" href="#next-sibling" id="ref-for-next-sibling②">next sibling</a> of <var>context effect</var>.</p>
      <li data-md>
       <p>If <var>context effect</var> is not in <var>effects</var> return <var>context effect</var> and abort these steps.</p>
     </ol>
    <li data-md>
     <p>Return <code>null</code>.</p>
   </ol>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="remove an animation effect" data-noexport id="remove-an-animation-effect">remove</dfn> a <var>effect</var> from its <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③③">parent group</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②②">animation</a>, perform the steps corresponding to the first
matching condition from below, if any:</p>
   <div class="switch">
    <dl>
     <dt data-md>If <var>effect</var> has a <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③④">parent group</a>,
     <dd data-md>
      <p>Remove <var>effect</var> from the <a data-link-type="dfn" href="#parent-group" id="ref-for-parent-group③⑤">parent group</a>’s
list of <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①④">child effects</a>.</p>
     <dt data-md>If <var>effect</var> is <a data-link-type="dfn" href="#directly-associated-with-an-animation" id="ref-for-directly-associated-with-an-animation⑦">directly associated with
an animation</a>,
     <dd data-md>
      <p>Disassociate <var>effect</var> from the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②③">animation</a>.</p>
    </dl>
   </div>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="insert children" data-noexport id="insert-children">insert</dfn> a series of zero or
more <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⑥">animation effects</a>, <var>effects</var>, to <var>parent</var>’s list of <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①⑤">child effects</a> before <var>reference child</var> perform the following steps for each <var>effect</var> in <var>effects</var>:</p>
   <p></p>
   <ol>
    <li data-md>
     <p><a data-link-type="dfn" href="#remove-an-animation-effect" id="ref-for-remove-an-animation-effect③">Remove</a> <var>effect</var> from its parent.</p>
    <li data-md>
     <p>Insert <var>effect</var> to <var>parent</var>’s list of <a data-link-type="dfn" href="#child-effect" id="ref-for-child-effect①⑥">child
effects</a> before <var>reference child</var></p>
   </ol>
   <h3 class="heading settled" data-level="5.9" id="the-animationnodelist-interface"><span class="secno">5.9. </span><span class="content">The <code>AnimationNodeList</code> interface</span><a class="self-link" href="#the-animationnodelist-interface"></a></h3>
   <p>A list of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⑦">animation effects</a> may be represented by
an <code class="idl"><a data-link-type="idl" href="#animationnodelist" id="ref-for-animationnodelist②">AnimationNodeList</a></code>.</p>
   <p>The <code>AnimationNodeList</code> interface supports indexed
properties with indices in the range 0 ≤ <var>index</var> &lt; <code>length</code>.</p>
   <p class="note" role="note"> The only reason this interface exists is to provide a familiar
experience for authors familiar with DOM interfaces where child nodes
are accessed via a <code>children</code> member. </p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑥"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animationnodelist"><code><c- g>AnimationNodeList</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-animationnodelist-length" id="ref-for-dom-animationnodelist-length"><c- g>length</c-></a>;
    <c- b>getter</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-animationnodelist-item" id="ref-for-dom-animationnodelist-item"><c- g>item</c-></a> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="AnimationNodeList/item(index)" data-dfn-type="argument" data-export id="dom-animationnodelist-item-index-index"><code><c- g>index</c-></code><a class="self-link" href="#dom-animationnodelist-item-index-index"></a></dfn>);
};
</pre>
   <div class="attributes">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationNodeList" data-dfn-type="attribute" data-export id="dom-animationnodelist-length"><code>length</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②">unsigned long</a>, readonly</span>
     <dd data-md>
      <p>The number of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⑧">animation effects</a> in the list.</p>
    </dl>
   </div>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="AnimationNodeList" data-dfn-type="method" data-export data-lt="item(index)" id="dom-animationnodelist-item"><code> getter AnimationEffectReadOnly? item(unsigned long index)</code></dfn>
     <dd data-md>
      <p>Returns the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①①⑨">animation effect</a> at <code>index</code>.
If <code>index</code> is greater than or equal to <code>length</code> returns <code>null</code>.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="5.10" id="the-animationsequence-interfaces"><span class="secno">5.10. </span><span class="content">The <code>SequenceEffectReadOnly</code> and <code>SequenceEffect</code> interfaces</span><a class="self-link" href="#the-animationsequence-interfaces"></a></h3>
   <p><a data-link-type="dfn" href="#sequence-effect" id="ref-for-sequence-effect①⑧">Sequence effects</a> are represented by the <code class="idl"><a data-link-type="idl" href="#sequenceeffectreadonly" id="ref-for-sequenceeffectreadonly">SequenceEffectReadOnly</a></code> interface.
Mutable <span id="ref-for-sequence-effect①⑨">sequence effects</span> are represented by the <code class="idl"><a data-link-type="idl" href="#sequenceeffect" id="ref-for-sequenceeffect①">SequenceEffect</a></code> interface.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑦"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 Constructor (sequence? children,
              optional (unrestricted double or AnimationEffectTimingProperties) timing)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="sequenceeffectreadonly"><code><c- g>SequenceEffectReadOnly</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly①⓪"><c- n>GroupEffectReadOnly</c-></a> {
    <a class="n" data-link-type="idl-name" href="#sequenceeffect" id="ref-for-sequenceeffect②"><c- n>SequenceEffect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-sequenceeffectreadonly-clone" id="ref-for-dom-sequenceeffectreadonly-clone"><c- g>clone</c-></a> ();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑧"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 Constructor (sequence? children,
              optional (unrestricted double or AnimationEffectTimingProperties) timing)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="sequenceeffect"><code><c- g>SequenceEffect</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#sequenceeffectreadonly" id="ref-for-sequenceeffectreadonly①"><c- n>SequenceEffectReadOnly</c-></a> {
};
<a class="n" data-link-type="idl-name" href="#sequenceeffect" id="ref-for-sequenceeffect③"><c- n>SequenceEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#animationeffectmutable" id="ref-for-animationeffectmutable②"><c- n>AnimationEffectMutable</c-></a>;
<a class="n" data-link-type="idl-name" href="#sequenceeffect" id="ref-for-sequenceeffect④"><c- n>SequenceEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#groupeffectmutable" id="ref-for-groupeffectmutable②"><c- n>GroupEffectMutable</c-></a>;
</pre>
   <div class="contructors">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SequenceEffect" data-dfn-type="constructor" data-export data-lt="SequenceEffect()" id="dom-sequenceeffect-sequenceeffect"><code><dfn class="dfn-paneled idl-code" data-dfn-for="SequenceEffectReadOnly" data-dfn-type="constructor" data-export data-lt="SequenceEffectReadOnly()" id="dom-sequenceeffectreadonly-sequenceeffectreadonly"><code> Constructor (sequence&lt;AnimationEffectReadOnly>? children,
optional (unrestricted double or AnimationEffectTimingProperties) timing)</code></dfn></code></dfn>
     <dd data-md>
      <p>The meaning and handling of each of the parameters in this
constructor is identical to the <code class="idl"><a data-link-type="idl" href="#dom-groupeffect-groupeffect" id="ref-for-dom-groupeffect-groupeffect②">GroupEffect()</a></code> constructor.</p>
    </dl>
   </div>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SequenceEffectReadOnly" data-dfn-type="method" data-export data-lt="clone()" id="dom-sequenceeffectreadonly-clone"><code> SequenceEffect clone ()</code></dfn>
     <dd data-md>
      <p>Creates a deep copy of this <code class="idl"><a data-link-type="idl" href="#sequenceeffectreadonly" id="ref-for-sequenceeffectreadonly②">SequenceEffectReadOnly</a></code> object using
the same procedure as defined for the <code class="idl"><a data-link-type="idl" href="#dom-groupeffectreadonly-clone" id="ref-for-dom-groupeffectreadonly-clone①">clone()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly①①">GroupEffectReadOnly</a></code> interface except that a new <code class="idl"><a data-link-type="idl" href="#sequenceeffect" id="ref-for-sequenceeffect⑤">SequenceEffect</a></code> object is created.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="5.11" id="the-keyframeeffect-interfaces"><span class="secno">5.11. </span><span class="content">The <code>KeyframeEffectReadOnly</code> and <code>KeyframeEffect</code> interfaces</span><a class="self-link" href="#the-keyframeeffect-interfaces"></a></h3>
   <p>The <a data-link-type="dfn">KeyframeEffect</a> interface is modified to add the following:</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#keyframeeffect" id="ref-for-keyframeeffect①"><c- g>KeyframeEffect</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation"><c- n>IterationCompositeOperation</c-></a>    <a class="idl-code" data-link-type="attribute" data-type="IterationCompositeOperation" href="#dom-keyframeeffect-iterationcomposite" id="ref-for-dom-keyframeeffect-iterationcomposite"><c- g>iterationComposite</c-></a>;
};

<a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#keyframeeffect" id="ref-for-keyframeeffect②"><c- n>KeyframeEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#animationeffectmutable" id="ref-for-animationeffectmutable③"><c- n>AnimationEffectMutable</c-></a>;
</pre>
   <div class="constructors">
    <dl>
     <dt data-md><dfn class="idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="constructor" data-export data-lt="KeyframeEffect(target, keyframes, options)" id="dom-keyframeeffect-keyframeeffect"><code> KeyframeEffect (target, keyframes, options)</code><a class="self-link" href="#dom-keyframeeffect-keyframeeffect"></a></dfn>
     <dd data-md>
      <p>Amend step 5 of the procedure to create a new <a data-link-type="dfn">KeyframeEffect</a> object as follows:</p>
      <ol start="5">
       <li data-md>
        <p>If <var>options</var> is a <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions">KeyframeEffectOptions</a></code> object,
assign the <code class="idl"><a data-link-type="idl" href="#dom-keyframeeffect-iterationcomposite" id="ref-for-dom-keyframeeffect-iterationcomposite①">iterationComposite</a></code>, and <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-composite" id="ref-for-dom-keyframeeffect-composite">composite</a></code>, properties of <var>effect</var> to the
corresponding value from <var>options</var>.</p>
        <p>When assigning these properties, the error-handling defined for the
corresponding setters on the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#keyframeeffect" id="ref-for-keyframeeffect③">KeyframeEffect</a></code> interface is applied.
If any of those setters require an exception to be thrown
for the values specified by <var>options</var>, this procedure must <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑤">throw</a> the same exception and abort all further steps.</p>
      </ol>
     <dt data-md><dfn class="idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="constructor" data-export data-lt="KeyframeEffect(source)" id="dom-keyframeeffect-keyframeeffect-source"><code>KeyframeEffect (source)</code><a class="self-link" href="#dom-keyframeeffect-keyframeeffect-source"></a></dfn>
     <dd data-md>
      <p>Amend the procedure to create a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#keyframeeffect" id="ref-for-keyframeeffect④">KeyframeEffect</a></code> object with the
same properties as <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-keyframeeffect-source-source" id="ref-for-dom-keyframeeffect-keyframeeffect-source-source">source</a></code> to include setting the <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation③">iteration composite operation</a> from <var>source</var> on <var>effect</var>.</p>
    </dl>
    <div class="attributes">
     <dl>
      <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffect" data-dfn-type="attribute" data-export id="dom-keyframeeffect-iterationcomposite"><code>iterationComposite</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation①">IterationCompositeOperation</a></span>
      <dd data-md>
       <p>The <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation④">iteration composite operation</a> property of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect⑤">keyframe effect</a> as specified by one of the <a data-link-type="dfn" href="#iterationcompositeoperation" id="ref-for-iterationcompositeoperation">IterationCompositeOperation</a> enumeration values.</p>
       <p>On setting, sets the <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation⑤">iteration composite operation</a> property of this <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②⓪">animation effect</a> to the provided value.</p>
     </dl>
     <h4 class="heading settled" data-level="5.11.1" id="creating-a-new-keyframeeffect-object"><span class="secno">5.11.1. </span><span class="content">Creating a new <code>KeyframeEffect</code> object</span><a class="self-link" href="#creating-a-new-keyframeeffect-object"></a></h4>
     <div class="informative-bg">
      <em>This section is non-normative</em> 
      <p>Replace:</p>
      <blockquote>
       <p>If the duration is not specified, a value of zero is used.</p>
      </blockquote>
      <p>with:</p>
      <blockquote>
       <p>If the duration is not specified, the <a data-link-type="dfn" href="#intrinsic-iteration-duration" id="ref-for-intrinsic-iteration-duration①①">intrinsic iteration
    duration</a> is used which, for a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect" id="ref-for-keyframe-effect⑥">keyframe effect</a>, is zero.</p>
      </blockquote>
      <p>Add:</p>
      <blockquote>
       <p>This is particularly useful in combination with other <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②①">animation
effects</a>.  For example, fading an element before switching <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility" id="ref-for-propdef-visibility">visibility</a> to
‘hidden’ can be achieved as follows,</p>
      </blockquote>
      <div class="example" id="example-e0f07204">
       <a class="self-link" href="#example-e0f07204"></a>
<pre class="lang-javascript highlight"><c- k>new</c-> SequenceEffect<c- p>(</c->
  <c- p>[</c->
    <c- k>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> opacity<c- o>:</c-> <c- mi>0</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>),</c->
    <c- k>new</c-> KeyframeEffect<c- p>(</c->elem<c- p>,</c-> <c- p>{</c-> visibility<c- o>:</c-> <c- t>'hidden'</c-> <c- p>},</c-> <c- p>{</c-> fill<c- o>:</c-> <c- t>'forwards'</c-> <c- p>})</c->
  <c- p>]</c->
<c- p>);</c-></pre>
      </div>
     </div>
     <h4 class="heading settled" data-level="5.11.2" id="the-keyframeeffectoptions-dictionary"><span class="secno">5.11.2. </span><span class="content">The KeyframeEffectOptions dictionary</span><a class="self-link" href="#the-keyframeeffectoptions-dictionary"></a></h4>
     <p>The <a data-link-type="dfn">KeyframeEffectOptions</a> dictionary interface is modified to add the
following member:</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions①"><c- g>KeyframeEffectOptions</c-></a> {
    <a class="n" data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation②"><c- n>IterationCompositeOperation</c-></a> <a class="idl-code" data-default="&quot;replace&quot;" data-link-type="dict-member" data-type="IterationCompositeOperation " href="#dom-keyframeeffectoptions-iterationcomposite" id="ref-for-dom-keyframeeffectoptions-iterationcomposite"><c- g>iterationComposite</c-></a> = "replace";
};
</pre>
     <div class="members">
      <dl>
       <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="KeyframeEffectOptions" data-dfn-type="dict-member" data-export id="dom-keyframeeffectoptions-iterationcomposite"><code>iterationComposite</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation③">IterationCompositeOperation</a>, defaulting to <code>"replace"</code></span>
       <dd data-md>
        <p>The <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation⑥">iteration composite operation</a> used to define the way
animation values build from iteration to iteration.</p>
      </dl>
      <h3 class="heading settled" data-level="5.12" id="the-iterationcompositeoperation-enumeration"><span class="secno">5.12. </span><span class="content">The IterationCompositeOperation enumeration</span><a class="self-link" href="#the-iterationcompositeoperation-enumeration"></a></h3>
      <p>The possible values of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②②">animation effect</a>’s <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation⑦">iteration composite operation</a> are represented by the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="iterationcompositeoperation">IterationCompositeOperation</dfn> enumeration.</p>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-iterationcompositeoperation"><code><c- g>IterationCompositeOperation</c-></code></dfn> { <dfn class="idl-code" data-dfn-for="IterationCompositeOperation" data-dfn-type="enum-value" data-export id="dom-iterationcompositeoperation-replace"><code><c- s>"replace"</c-></code><a class="self-link" href="#dom-iterationcompositeoperation-replace"></a></dfn>, <dfn class="idl-code" data-dfn-for="IterationCompositeOperation" data-dfn-type="enum-value" data-export id="dom-iterationcompositeoperation-accumulate"><code><c- s>"accumulate"</c-></code><a class="self-link" href="#dom-iterationcompositeoperation-accumulate"></a></dfn> };
</pre>
      <dl>
       <dt data-md><code>replace</code>
       <dd data-md>
        <p>Corresponds to the <a data-link-type="dfn" href="#iteration-composite-operation-replace" id="ref-for-iteration-composite-operation-replace">replace</a> <a data-link-type="dfn" href="#iteration-composite-operation" id="ref-for-iteration-composite-operation⑧">iteration composite operation</a> value such that the <a data-link-type="dfn">effect value</a> produced is independent of the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#current-iteration" id="ref-for-current-iteration②">current iteration</a>.</p>
       <dt data-md><code>accumulate</code>
       <dd data-md>
        <p>Corresponds to the <a data-link-type="dfn" href="#iteration-composite-operation-accumulate" id="ref-for-iteration-composite-operation-accumulate①">accumulate</a> iteration composite operation value such that
subsequent iterations of an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②③">animation effect</a> build
on the final value of the previous iteration.</p>
      </dl>
      <h3 class="heading settled" data-level="5.13" id="the-effectcallback-callback-function"><span class="secno">5.13. </span><span class="content">The <code>EffectCallback</code> callback function</span><a class="self-link" href="#the-effectcallback-callback-function"></a></h3>
      <p><a data-link-type="dfn" href="#custom-effect" id="ref-for-custom-effect①⑥">Custom effects</a> can be defined in script by providing an <code class="idl"><a data-link-type="idl" href="#callbackdef-effectcallback" id="ref-for-callbackdef-effectcallback">EffectCallback</a></code> callback function.</p>
<pre class="idl highlight def"><c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-effectcallback"><code><c- g>EffectCallback</c-></code></dfn> = <c- b>void</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑧"><c- b>double</c-></a>? <dfn class="idl-code" data-dfn-for="EffectCallback" data-dfn-type="argument" data-export id="dom-effectcallback-progress"><code><c- g>progress</c-></code><a class="self-link" href="#dom-effectcallback-progress"></a></dfn>,
                                (<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/css-pseudo-4/#csspseudoelement" id="ref-for-csspseudoelement"><c- n>CSSPseudoElement</c-></a>) <dfn class="idl-code" data-dfn-for="EffectCallback" data-dfn-type="argument" data-export id="dom-effectcallback-currenttarget"><code><c- g>currentTarget</c-></code><a class="self-link" href="#dom-effectcallback-currenttarget"></a></dfn>,
                                <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②④"><c- n>Animation</c-></a> <dfn class="idl-code" data-dfn-for="EffectCallback" data-dfn-type="argument" data-export id="dom-effectcallback-animation"><code><c- g>animation</c-></code><a class="self-link" href="#dom-effectcallback-animation"></a></dfn>);
</pre>
      <p>An <code class="idl"><a data-link-type="idl" href="#callbackdef-effectcallback" id="ref-for-callbackdef-effectcallback①">EffectCallback</a></code> is called each time an <code class="idl"><a data-link-type="idl">KeyframeEffectReadOnly</a></code> object
with which it is
associated is updated.</p>
      <div class="parameters">
       <dl>
        <dt data-md>double? progress
        <dd data-md>
         <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress" id="ref-for-iteration-progress①①">iteration progress</a> value for which to produce an effect.
When this is <code>null</code>, the function SHOULD
remove the effect.</p>
        <dt data-md>(Element or CSSPseudoElement) currentTarget
        <dd data-md>
         <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-element" id="ref-for-target-element⑤">target element</a> on which this callback is expected
to operate.</p>
         <div class="note" role="note">
          <p>Note that <var>currentTarget</var> may differ from <code><var>animation</var>.target</code>.</p>
          <p>If the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-element" id="ref-for-target-element⑥">target element</a> of <var>animation</var> is changed between updates, this method will be
called once with a null <var>progress</var> and the
previous <span id="ref-for-target-element⑦">target element</span> as the <var>currentTarget</var>, then again with the current <var>progress</var> and the updated <span id="ref-for-target-element⑧">target
element</span> as the <var>currentTarget</var>.
This allows the animation effect to be removed from the old <span id="ref-for-target-element⑨">target element</span>.</p>
         </div>
        <dt data-md>Animation animation
        <dd data-md>
         <p>The <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⑤">Animation</a></code> object that is being updated.</p>
       </dl>
      </div>
      <h3 class="heading settled" data-level="5.14" id="the-animatable-interface"><span class="secno">5.14. </span><span class="content">The <code>Animatable</code> interface</span><a class="self-link" href="#the-animatable-interface"></a></h3>
      <div class="methods">
       <dl>
        <dt data-md><dfn class="idl-code" data-dfn-for="Animatable" data-dfn-type="method" data-export data-lt="getAnimations()" id="dom-animatable-getanimations"><code> sequence&lt;Animation> getAnimations()</code><a class="self-link" href="#dom-animatable-getanimations"></a></dfn>
        <dd data-md>
         <p>Add:</p>
         <blockquote>
          <p>If this object is the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#target-element" id="ref-for-target-element①⓪">target element</a> of two or more <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect" id="ref-for-animation-effect①②④">animation effects</a> which are associated with the
same <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⑥">animation</a>, the corresponding <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⑦">Animation</a></code> object will still only appear in the returned list once.</p>
         </blockquote>
       </dl>
      </div>
      <h3 class="heading settled" data-level="5.15" id="model-liveness"><span class="secno">5.15. </span><span class="content">Model liveness</span><a class="self-link" href="#model-liveness"></a></h3>
      <div class="informative-bg">
       <em>This section is non-normative</em> 
       <p>Regarding the section on, “ Changes made to the Web Animations model take
effect immediately”, add:</p>
       <blockquote>
        <p>The same concept applies to more complex modifications of the
    Web Animations model such as adding and removing children from
    an <code class="idl"><a data-link-type="idl" href="#groupeffect" id="ref-for-groupeffect⑧">GroupEffect</a></code>.</p>
       </blockquote>
       <p>Add:</p>
       <blockquote>
        <dl>
         <dt data-md>Changes made to the model using the programming interface do <em>not</em> cause any <code class="idl"><a data-link-type="idl" href="#callbackdef-effectcallback" id="ref-for-callbackdef-effectcallback②">EffectCallback</a></code> functions to be
called
         <dd data-md>
          <p>For example, in the following code, the callback function will
not be called until <em>after</em> the script block has
completed during regular updating.</p>
          <div class="example" id="example-e18684ee">
           <a class="self-link" href="#example-e18684ee"></a> 
<pre class="lang-javascript highlight"><c- a>var</c-> timesCalled <c- o>=</c-> <c- mi>0</c-><c- p>;</c->
elem<c- p>.</c->animate<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c->
  timesCalled<c- o>++</c-><c- p>;</c->
<c- p>},</c-> <c- mi>10000</c-><c- p>);</c->
alert<c- p>(</c->timesCalled<c- p>);</c-> <c- c1>// Displays ‘0’</c-></pre>
          </div>
          <p class="note" role="note"><span>Note:</span> Need to spec this properly somewhere.</p>
        </dl>
       </blockquote>
      </div>
     </div>
    </div>
   </div>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-iterationcompositeoperation-accumulate">"accumulate"</a><span>, in §5.12</span>
   <li><a href="#active-duration">active duration</a><span>, in §3.6.2</span>
   <li><a href="#dom-animationeffectmutable-after">after()</a><span>, in §5.3</span>
   <li><a href="#dom-animationeffectmutable-after">after(...effects)</a><span>, in §5.3</span>
   <li><a href="#ancestor">ancestor</a><span>, in §3.8</span>
   <li><a href="#animationeffectmutable">AnimationEffectMutable</a><span>, in §5.3</span>
   <li><a href="#animation-effect-playback-rate">animation effect playback rate</a><span>, in §3.5</span>
   <li><a href="#animation-effect-start-time">animation effect start time</a><span>, in §3.2</span>
   <li><a href="#animationnodelist">AnimationNodeList</a><span>, in §5.9</span>
   <li><a href="#dom-groupeffectmutable-append">append()</a><span>, in §5.8</span>
   <li><a href="#dom-groupeffectmutable-append">append(...effects)</a><span>, in §5.8</span>
   <li><a href="#associated-with-an-animation">associated with an animation</a><span>, in §3.3</span>
   <li><a href="#dom-fillmode-auto">"auto"</a><span>, in §5.7.1</span>
   <li><a href="#dom-fillmode-backwards">"backwards"</a><span>, in §5.7.1</span>
   <li><a href="#dom-animationeffectmutable-before">before()</a><span>, in §5.3</span>
   <li><a href="#dom-animationeffectmutable-before">before(...effects)</a><span>, in §5.3</span>
   <li><a href="#dom-fillmode-both">"both"</a><span>, in §5.7.1</span>
   <li><a href="#child-effect">child effect</a><span>, in §3.8</span>
   <li><a href="#dom-groupeffectreadonly-children">children</a><span>, in §5.8</span>
   <li>
    clone()
    <ul>
     <li><a href="#dom-groupeffectreadonly-clone">method for GroupEffectReadOnly</a><span>, in §5.8</span>
     <li><a href="#dom-sequenceeffectreadonly-clone">method for SequenceEffectReadOnly</a><span>, in §5.10</span>
    </ul>
   <li><a href="#current">current</a><span>, in §3.3.4</span>
   <li><a href="#custom-effect">custom effect</a><span>, in §4.5</span>
   <li><a href="#delay">delay</a><span>, in §5.4</span>
   <li><a href="#descendant">descendant</a><span>, in §3.8</span>
   <li><a href="#directly-associated-with-an-animation">directly associated with an animation</a><span>, in §3.3</span>
   <li><a href="#duration">duration</a><span>, in §5.4</span>
   <li><a href="#callbackdef-effectcallback">EffectCallback</a><span>, in §5.13</span>
   <li><a href="#enddelay">endDelay</a><span>, in §5.4</span>
   <li><a href="#endtime">endTime</a><span>, in §5.7</span>
   <li><a href="#end-time">end time</a><span>, in §3.2</span>
   <li><a href="#enumdef-fillmode">FillMode</a><span>, in §5.7.1</span>
   <li><a href="#dom-groupeffectreadonly-firstchild">firstChild</a><span>, in §5.8</span>
   <li><a href="#first-child">first child</a><span>, in §3.8</span>
   <li><a href="#dom-fillmode-forwards">"forwards"</a><span>, in §5.7.1</span>
   <li><a href="#dom-animatable-getanimations">getAnimations()</a><span>, in §5.14</span>
   <li><a href="#dom-animationeffectreadonly-getcomputedtiming">getComputedTiming()</a><span>, in §5.3</span>
   <li><a href="#group-effect">group effect</a><span>, in §3.8</span>
   <li><a href="#groupeffect">GroupEffect</a><span>, in §5.8</span>
   <li><a href="#dom-groupeffect-groupeffect">GroupEffect(children, timing)</a><span>, in §5.8</span>
   <li><a href="#groupeffectmutable">GroupEffectMutable</a><span>, in §5.8</span>
   <li><a href="#groupeffectreadonly">GroupEffectReadOnly</a><span>, in §5.8</span>
   <li><a href="#dom-groupeffectreadonly-groupeffectreadonly">GroupEffectReadOnly(children, timing)</a><span>, in §5.8</span>
   <li><a href="#inclusive-ancestor">inclusive ancestor</a><span>, in §3.8</span>
   <li><a href="#inclusive-descendant">inclusive descendant</a><span>, in §3.8</span>
   <li><a href="#inherited-time">inherited time</a><span>, in §3.3.3</span>
   <li><a href="#in-play">in play</a><span>, in §3.3.4</span>
   <li><a href="#insert-children">insert children</a><span>, in §5.8.2</span>
   <li><a href="#intrinsic-iteration-duration">intrinsic iteration duration</a><span>, in §3.4.1</span>
   <li><a href="#dom-animationnodelist-item">item(index)</a><span>, in §5.9</span>
   <li>
    iterationComposite
    <ul>
     <li><a href="#dom-keyframeeffect-iterationcomposite">attribute for KeyframeEffect</a><span>, in §5.11</span>
     <li><a href="#dom-keyframeeffectoptions-iterationcomposite">dict-member for KeyframeEffectOptions</a><span>, in §5.11.2</span>
    </ul>
   <li>
    IterationCompositeOperation
    <ul>
     <li><a href="#enumdef-iterationcompositeoperation">(enum)</a><span>, in §5.12</span>
     <li><a href="#iterationcompositeoperation">definition of</a><span>, in §5.12</span>
    </ul>
   <li><a href="#iteration-composite-operation">iteration composite operation</a><span>, in §4.4</span>
   <li><a href="#iteration-composite-operation-accumulate">iteration composite operation accumulate</a><span>, in §4.4</span>
   <li><a href="#iteration-composite-operation-replace">iteration composite operation replace</a><span>, in §4.4</span>
   <li><a href="#dom-keyframeeffect-keyframeeffect-source">KeyframeEffect(source)</a><span>, in §5.11</span>
   <li><a href="#dom-keyframeeffect-keyframeeffect">KeyframeEffect(target, keyframes, options)</a><span>, in §5.11</span>
   <li><a href="#last-child">last child</a><span>, in §3.8</span>
   <li><a href="#dom-groupeffectreadonly-lastchild">lastChild</a><span>, in §5.8</span>
   <li><a href="#dom-animationnodelist-length">length</a><span>, in §5.9</span>
   <li><a href="#local-time">local time</a><span>, in §3.3.3</span>
   <li><a href="#localtime">localTime</a><span>, in §5.7</span>
   <li><a href="#next-sibling">next sibling</a><span>, in §3.8</span>
   <li><a href="#dom-animationeffectreadonly-nextsibling">nextSibling</a><span>, in §5.3</span>
   <li><a href="#next-sibling-not-included">next sibling not included</a><span>, in §5.8.2</span>
   <li><a href="#dom-fillmode-none">"none"</a><span>, in §5.7.1</span>
   <li><a href="#dom-animationeffectreadonly-parent">parent</a><span>, in §5.3</span>
   <li><a href="#parent-group">parent group</a><span>, in §3.8</span>
   <li><a href="#dom-animationtimeline-play">play()</a><span>, in §5.1</span>
   <li>
    playbackRate
    <ul>
     <li><a href="#dom-animationeffecttiming-playbackrate">attribute for AnimationEffectTiming</a><span>, in §5.5</span>
     <li><a href="#dom-animationeffecttimingreadonly-playbackrate">attribute for AnimationEffectTimingReadOnly</a><span>, in §5.4</span>
     <li><a href="#dom-animationeffecttimingproperties-playbackrate">dict-member for AnimationEffectTimingProperties</a><span>, in §5.6</span>
    </ul>
   <li><a href="#dom-animationtimeline-play">play(effect)</a><span>, in §5.1</span>
   <li><a href="#dom-groupeffectmutable-prepend">prepend()</a><span>, in §5.8</span>
   <li><a href="#dom-groupeffectmutable-prepend">prepend(...effects)</a><span>, in §5.8</span>
   <li><a href="#previous-sibling">previous sibling</a><span>, in §3.8</span>
   <li><a href="#dom-animationeffectreadonly-previoussibling">previousSibling</a><span>, in §5.3</span>
   <li><a href="#process-a-timing-argument">process a timing argument</a><span>, in §5.8.1</span>
   <li><a href="#dom-animationeffectmutable-remove">remove()</a><span>, in §5.3</span>
   <li><a href="#remove-an-animation-effect">remove an animation effect</a><span>, in §5.8.2</span>
   <li><a href="#repeated-duration">repeated duration</a><span>, in §3.6.2</span>
   <li><a href="#dom-iterationcompositeoperation-replace">"replace"</a><span>, in §5.12</span>
   <li><a href="#dom-animationeffectmutable-replace">replace()</a><span>, in §5.3</span>
   <li><a href="#dom-animationeffectmutable-replace">replace(...effects)</a><span>, in §5.3</span>
   <li><a href="#root">root</a><span>, in §3.8</span>
   <li><a href="#sequence-effect">sequence effect</a><span>, in §3.8.4</span>
   <li><a href="#sequenceeffect">SequenceEffect</a><span>, in §5.10</span>
   <li><a href="#dom-sequenceeffect-sequenceeffect">SequenceEffect()</a><span>, in §5.10</span>
   <li><a href="#dom-sequenceeffectreadonly-sequenceeffectreadonly">SequenceEffectReadOnly()</a><span>, in §5.10</span>
   <li><a href="#sequenceeffectreadonly">SequenceEffectReadOnly</a><span>, in §5.10</span>
   <li><a href="#start-delay">start delay</a><span>, in §3.2</span>
   <li><a href="#dom-computedtimingproperties-starttime">startTime</a><span>, in §5.7</span>
   <li><a href="#dom-animation-timeline">timeline</a><span>, in §5.2</span>
   <li><a href="#transformed-time">transformed time</a><span>, in §3.7.2</span>
   <li><a href="#tree-order">tree order</a><span>, in §3.8</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-linear-easing-function">
   <a href="https://drafts.csswg.org/css-easing-1/#linear-easing-function">https://drafts.csswg.org/css-easing-1/#linear-easing-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-linear-easing-function">3.7. Time transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-easing-function">
   <a href="https://drafts.csswg.org/css-easing-1/#easing-function">https://drafts.csswg.org/css-easing-1/#easing-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-easing-function">3.3.5. Fill modes</a>
    <li><a href="#ref-for-easing-function①">3.7. Time transformations</a>
    <li><a href="#ref-for-easing-function②">3.8.1. Relationship of group time to child time</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-csspseudoelement">
   <a href="https://drafts.csswg.org/css-pseudo-4/#csspseudoelement">https://drafts.csswg.org/css-pseudo-4/#csspseudoelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-csspseudoelement">5.13. The EffectCallback callback function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-accumulation">
   <a href="https://drafts.csswg.org/css-values-4/#accumulation">https://drafts.csswg.org/css-values-4/#accumulation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-accumulation">4.2.1. The effect value of a keyframe effect</a>
    <li><a href="#ref-for-accumulation①">4.4. Effect accumulation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-visibility">
   <a href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility">https://drafts.csswg.org/css2/visufx.html#propdef-visibility</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-visibility">5.11.1. Creating a new KeyframeEffect object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">5.13. The EffectCallback callback function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-code-realms">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-code-realms">http://www.ecma-international.org/ecma-262/6.0/#sec-code-realms</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-code-realms">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-execution-contexts">
   <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-execution-contexts">http://www.ecma-international.org/ecma-262/6.0/#sec-execution-contexts</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-execution-contexts">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animation">
   <a href="https://drafts.csswg.org/web-animations-1/#animation">https://drafts.csswg.org/web-animations-1/#animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation">3.3. Animation effects</a> <a href="#ref-for-animation①">(2)</a> <a href="#ref-for-animation②">(3)</a>
    <li><a href="#ref-for-animation③">3.3.3. Local time and inherited time</a> <a href="#ref-for-animation④">(2)</a>
    <li><a href="#ref-for-animation⑤">3.5. Animation effect speed control</a> <a href="#ref-for-animation⑥">(2)</a> <a href="#ref-for-animation⑦">(3)</a> <a href="#ref-for-animation⑧">(4)</a> <a href="#ref-for-animation⑨">(5)</a>
    <li><a href="#ref-for-animation①⓪">3.8. Grouping and synchronization</a> <a href="#ref-for-animation①①">(2)</a>
    <li><a href="#ref-for-animation①②">4.1.1. Not animatable</a>
    <li><a href="#ref-for-animation①③">4.3.1. The effect stack</a>
    <li><a href="#ref-for-animation①④">5.1. The AnimationTimeline interface</a> <a href="#ref-for-animation①⑤">(2)</a> <a href="#ref-for-animation①⑥">(3)</a> <a href="#ref-for-animation①⑦">(4)</a> <a href="#ref-for-animation①⑧">(5)</a>
    <li><a href="#ref-for-animation①⑨">5.2. The Animation interface</a> <a href="#ref-for-animation②⓪">(2)</a>
    <li><a href="#ref-for-animation②①">5.3. The AnimationEffectReadOnly interface</a>
    <li><a href="#ref-for-animation②②">5.8.2. Definitions for manipulating hierarchies</a> <a href="#ref-for-animation②③">(2)</a>
    <li><a href="#ref-for-animation②④">5.13. The EffectCallback callback function</a> <a href="#ref-for-animation②⑤">(2)</a>
    <li><a href="#ref-for-animation②⑥">5.14. The Animatable interface</a> <a href="#ref-for-animation②⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-animation-animation">
   <a href="https://drafts.csswg.org/web-animations-1/#dom-animation-animation">https://drafts.csswg.org/web-animations-1/#dom-animation-animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-animation">5.1. The AnimationTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animationtimeline">
   <a href="https://drafts.csswg.org/web-animations-1/#animationtimeline">https://drafts.csswg.org/web-animations-1/#animationtimeline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationtimeline">5.1. The AnimationTimeline interface</a> <a href="#ref-for-animationtimeline①">(2)</a>
    <li><a href="#ref-for-animationtimeline②">5.2. The Animation interface</a> <a href="#ref-for-animationtimeline③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-keyframeeffect">
   <a href="https://drafts.csswg.org/web-animations-1/#keyframeeffect">https://drafts.csswg.org/web-animations-1/#keyframeeffect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-keyframeeffect">5.5. The AnimationEffectTiming interface</a>
    <li><a href="#ref-for-keyframeeffect①">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a> <a href="#ref-for-keyframeeffect②">(2)</a> <a href="#ref-for-keyframeeffect③">(3)</a> <a href="#ref-for-keyframeeffect④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-keyframeeffectoptions">
   <a href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions">https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-keyframeeffectoptions">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a>
    <li><a href="#ref-for-dictdef-keyframeeffectoptions①">5.11.2. The KeyframeEffectOptions dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-active-interval">
   <a href="https://drafts.csswg.org/web-animations-1/#active-interval">https://drafts.csswg.org/web-animations-1/#active-interval</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-interval">3.3.2. The active interval</a>
    <li><a href="#ref-for-active-interval①">3.2. Animations</a> <a href="#ref-for-active-interval②">(2)</a>
    <li><a href="#ref-for-active-interval③">3.3.4. Animation effect phases and
states</a>
    <li><a href="#ref-for-active-interval④">3.5. Animation effect speed control</a> <a href="#ref-for-active-interval⑤">(2)</a> <a href="#ref-for-active-interval⑥">(3)</a>
    <li><a href="#ref-for-active-interval⑦">3.8.1. Relationship of group time to child time</a> <a href="#ref-for-active-interval⑧">(2)</a> <a href="#ref-for-active-interval⑨">(3)</a> <a href="#ref-for-active-interval①⓪">(4)</a> <a href="#ref-for-active-interval①①">(5)</a>
    <li><a href="#ref-for-active-interval①②">3.8.3. The intrinsic
  iteration duration of a group effect</a>
    <li><a href="#ref-for-active-interval①③">3.8.4.1. The start time of
  children of a sequence effect</a> <a href="#ref-for-active-interval①④">(2)</a> <a href="#ref-for-active-interval①⑤">(3)</a> <a href="#ref-for-active-interval①⑥">(4)</a>
    <li><a href="#ref-for-active-interval①⑦">5.4. The AnimationEffectTimingReadOnly interface</a> <a href="#ref-for-active-interval①⑧">(2)</a>
    <li><a href="#ref-for-active-interval①⑨">5.7. The
  ComputedTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-active-phase">
   <a href="https://drafts.csswg.org/web-animations-1/#active-phase">https://drafts.csswg.org/web-animations-1/#active-phase</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-phase">3.3.4. Animation effect phases and
states</a> <a href="#ref-for-active-phase①">(2)</a> <a href="#ref-for-active-phase②">(3)</a>
    <li><a href="#ref-for-active-phase③">3.3.5. Fill modes</a> <a href="#ref-for-active-phase④">(2)</a>
    <li><a href="#ref-for-active-phase⑤">3.6.3.1. Calculating the active time</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-active-time">
   <a href="https://drafts.csswg.org/web-animations-1/#active-time">https://drafts.csswg.org/web-animations-1/#active-time</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-time">3.2. Animations</a>
    <li><a href="#ref-for-active-time①">3.6.1. Overview</a> <a href="#ref-for-active-time②">(2)</a>
    <li><a href="#ref-for-active-time③">3.6.3.1. Calculating the active time</a>
    <li><a href="#ref-for-active-time④">3.6.3.2. Calculating the overall progress</a> <a href="#ref-for-active-time⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-after-phase">
   <a href="https://drafts.csswg.org/web-animations-1/#after-phase">https://drafts.csswg.org/web-animations-1/#after-phase</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-after-phase">3.3.5. Fill modes</a> <a href="#ref-for-after-phase①">(2)</a> <a href="#ref-for-after-phase②">(3)</a>
    <li><a href="#ref-for-after-phase③">3.6.3.1. Calculating the active time</a> <a href="#ref-for-after-phase④">(2)</a> <a href="#ref-for-after-phase⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animation">
   <a href="https://drafts.csswg.org/web-animations-1/#animation">https://drafts.csswg.org/web-animations-1/#animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation">3.3. Animation effects</a> <a href="#ref-for-animation①">(2)</a> <a href="#ref-for-animation②">(3)</a>
    <li><a href="#ref-for-animation③">3.3.3. Local time and inherited time</a> <a href="#ref-for-animation④">(2)</a>
    <li><a href="#ref-for-animation⑤">3.5. Animation effect speed control</a> <a href="#ref-for-animation⑥">(2)</a> <a href="#ref-for-animation⑦">(3)</a> <a href="#ref-for-animation⑧">(4)</a> <a href="#ref-for-animation⑨">(5)</a>
    <li><a href="#ref-for-animation①⓪">3.8. Grouping and synchronization</a> <a href="#ref-for-animation①①">(2)</a>
    <li><a href="#ref-for-animation①②">4.1.1. Not animatable</a>
    <li><a href="#ref-for-animation①③">4.3.1. The effect stack</a>
    <li><a href="#ref-for-animation①④">5.1. The AnimationTimeline interface</a> <a href="#ref-for-animation①⑤">(2)</a> <a href="#ref-for-animation①⑥">(3)</a> <a href="#ref-for-animation①⑦">(4)</a> <a href="#ref-for-animation①⑧">(5)</a>
    <li><a href="#ref-for-animation①⑨">5.2. The Animation interface</a> <a href="#ref-for-animation②⓪">(2)</a>
    <li><a href="#ref-for-animation②①">5.3. The AnimationEffectReadOnly interface</a>
    <li><a href="#ref-for-animation②②">5.8.2. Definitions for manipulating hierarchies</a> <a href="#ref-for-animation②③">(2)</a>
    <li><a href="#ref-for-animation②④">5.13. The EffectCallback callback function</a> <a href="#ref-for-animation②⑤">(2)</a>
    <li><a href="#ref-for-animation②⑥">5.14. The Animatable interface</a> <a href="#ref-for-animation②⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animation-effect">
   <a href="https://drafts.csswg.org/web-animations-1/#animation-effect">https://drafts.csswg.org/web-animations-1/#animation-effect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-effect">2. Changes since level 1</a>
    <li><a href="#ref-for-animation-effect①">3.2.3. Waiting for the target effect</a>
    <li><a href="#ref-for-animation-effect②">3.2.7. Speed control</a>
    <li><a href="#ref-for-animation-effect③">3.3. Animation effects</a> <a href="#ref-for-animation-effect④">(2)</a> <a href="#ref-for-animation-effect⑤">(3)</a> <a href="#ref-for-animation-effect⑥">(4)</a> <a href="#ref-for-animation-effect⑦">(5)</a>
    <li><a href="#ref-for-animation-effect⑧">3.3.1. Types of animation effects</a>
    <li><a href="#ref-for-animation-effect⑨">3.3.2. The active interval</a> <a href="#ref-for-animation-effect①⓪">(2)</a>
    <li><a href="#ref-for-animation-effect①①">3.2. Animations</a> <a href="#ref-for-animation-effect①②">(2)</a> <a href="#ref-for-animation-effect①③">(3)</a> <a href="#ref-for-animation-effect①④">(4)</a> <a href="#ref-for-animation-effect①⑤">(5)</a> <a href="#ref-for-animation-effect①⑥">(6)</a> <a href="#ref-for-animation-effect①⑦">(7)</a>
    <li><a href="#ref-for-animation-effect①⑧">3.3.3. Local time and inherited time</a> <a href="#ref-for-animation-effect①⑨">(2)</a> <a href="#ref-for-animation-effect②⓪">(3)</a> <a href="#ref-for-animation-effect②①">(4)</a> <a href="#ref-for-animation-effect②②">(5)</a> <a href="#ref-for-animation-effect②③">(6)</a> <a href="#ref-for-animation-effect②④">(7)</a> <a href="#ref-for-animation-effect②⑤">(8)</a> <a href="#ref-for-animation-effect②⑥">(9)</a>
    <li><a href="#ref-for-animation-effect②⑦">3.3.4. Animation effect phases and
states</a> <a href="#ref-for-animation-effect②⑧">(2)</a> <a href="#ref-for-animation-effect②⑨">(3)</a> <a href="#ref-for-animation-effect③⓪">(4)</a> <a href="#ref-for-animation-effect③①">(5)</a> <a href="#ref-for-animation-effect③②">(6)</a> <a href="#ref-for-animation-effect③③">(7)</a> <a href="#ref-for-animation-effect③④">(8)</a> <a href="#ref-for-animation-effect③⑤">(9)</a> <a href="#ref-for-animation-effect③⑥">(10)</a> <a href="#ref-for-animation-effect③⑦">(11)</a>
    <li><a href="#ref-for-animation-effect③⑧">3.4.1. Iteration intervals</a>
    <li><a href="#ref-for-animation-effect③⑨">3.5. Animation effect speed control</a> <a href="#ref-for-animation-effect④⓪">(2)</a> <a href="#ref-for-animation-effect④①">(3)</a> <a href="#ref-for-animation-effect④②">(4)</a> <a href="#ref-for-animation-effect④③">(5)</a> <a href="#ref-for-animation-effect④④">(6)</a> <a href="#ref-for-animation-effect④⑤">(7)</a> <a href="#ref-for-animation-effect④⑥">(8)</a> <a href="#ref-for-animation-effect④⑦">(9)</a> <a href="#ref-for-animation-effect④⑧">(10)</a> <a href="#ref-for-animation-effect④⑨">(11)</a> <a href="#ref-for-animation-effect⑤⓪">(12)</a> <a href="#ref-for-animation-effect⑤①">(13)</a> <a href="#ref-for-animation-effect⑤②">(14)</a>
    <li><a href="#ref-for-animation-effect⑤③">3.6.1. Overview</a> <a href="#ref-for-animation-effect⑤④">(2)</a>
    <li><a href="#ref-for-animation-effect⑤⑤">3.6.3.1. Calculating the active time</a>
    <li><a href="#ref-for-animation-effect⑤⑥">3.8. Grouping and synchronization</a> <a href="#ref-for-animation-effect⑤⑦">(2)</a> <a href="#ref-for-animation-effect⑤⑧">(3)</a> <a href="#ref-for-animation-effect⑤⑨">(4)</a> <a href="#ref-for-animation-effect⑥⓪">(5)</a> <a href="#ref-for-animation-effect⑥①">(6)</a> <a href="#ref-for-animation-effect⑥②">(7)</a> <a href="#ref-for-animation-effect⑥③">(8)</a> <a href="#ref-for-animation-effect⑥④">(9)</a>
    <li><a href="#ref-for-animation-effect⑥⑤">3.8.1. Relationship of group time to child time</a> <a href="#ref-for-animation-effect⑥⑥">(2)</a> <a href="#ref-for-animation-effect⑥⑦">(3)</a> <a href="#ref-for-animation-effect⑥⑧">(4)</a>
    <li><a href="#ref-for-animation-effect⑥⑨">3.8.4.1. The start time of
  children of a sequence effect</a> <a href="#ref-for-animation-effect⑦⓪">(2)</a>
    <li><a href="#ref-for-animation-effect⑦①">4.1.1. Not animatable</a> <a href="#ref-for-animation-effect⑦②">(2)</a>
    <li><a href="#ref-for-animation-effect⑦③">4.5. Custom effects</a> <a href="#ref-for-animation-effect⑦④">(2)</a> <a href="#ref-for-animation-effect⑦⑤">(3)</a> <a href="#ref-for-animation-effect⑦⑥">(4)</a>
    <li><a href="#ref-for-animation-effect⑦⑦">4.5.1. Sampling custom effects</a> <a href="#ref-for-animation-effect⑦⑧">(2)</a> <a href="#ref-for-animation-effect⑦⑨">(3)</a> <a href="#ref-for-animation-effect⑧⓪">(4)</a> <a href="#ref-for-animation-effect⑧①">(5)</a>
    <li><a href="#ref-for-animation-effect⑧②">4.5.2. Execution order of custom effects</a> <a href="#ref-for-animation-effect⑧③">(2)</a> <a href="#ref-for-animation-effect⑧④">(3)</a> <a href="#ref-for-animation-effect⑧⑤">(4)</a>
    <li><a href="#ref-for-animation-effect⑧⑥">5.3. The AnimationEffectReadOnly interface</a> <a href="#ref-for-animation-effect⑧⑦">(2)</a> <a href="#ref-for-animation-effect⑧⑧">(3)</a> <a href="#ref-for-animation-effect⑧⑨">(4)</a> <a href="#ref-for-animation-effect⑨⓪">(5)</a> <a href="#ref-for-animation-effect⑨①">(6)</a> <a href="#ref-for-animation-effect⑨②">(7)</a> <a href="#ref-for-animation-effect⑨③">(8)</a> <a href="#ref-for-animation-effect⑨④">(9)</a> <a href="#ref-for-animation-effect⑨⑤">(10)</a> <a href="#ref-for-animation-effect⑨⑥">(11)</a> <a href="#ref-for-animation-effect⑨⑦">(12)</a> <a href="#ref-for-animation-effect⑨⑧">(13)</a> <a href="#ref-for-animation-effect⑨⑨">(14)</a>
    <li><a href="#ref-for-animation-effect①⓪⓪">5.4. The AnimationEffectTimingReadOnly interface</a> <a href="#ref-for-animation-effect①⓪①">(2)</a> <a href="#ref-for-animation-effect①⓪②">(3)</a> <a href="#ref-for-animation-effect①⓪③">(4)</a>
    <li><a href="#ref-for-animation-effect①⓪④">5.5. The AnimationEffectTiming interface</a>
    <li><a href="#ref-for-animation-effect①⓪⑤">5.7. The
  ComputedTimingProperties dictionary</a> <a href="#ref-for-animation-effect①⓪⑥">(2)</a> <a href="#ref-for-animation-effect①⓪⑦">(3)</a> <a href="#ref-for-animation-effect①⓪⑧">(4)</a> <a href="#ref-for-animation-effect①⓪⑨">(5)</a>
    <li><a href="#ref-for-animation-effect①①⓪">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-animation-effect①①①">(2)</a> <a href="#ref-for-animation-effect①①②">(3)</a> <a href="#ref-for-animation-effect①①③">(4)</a>
    <li><a href="#ref-for-animation-effect①①④">5.8.1. Processing a timing argument</a>
    <li><a href="#ref-for-animation-effect①①⑤">5.8.2. Definitions for manipulating hierarchies</a> <a href="#ref-for-animation-effect①①⑥">(2)</a>
    <li><a href="#ref-for-animation-effect①①⑦">5.9. The AnimationNodeList interface</a> <a href="#ref-for-animation-effect①①⑧">(2)</a> <a href="#ref-for-animation-effect①①⑨">(3)</a>
    <li><a href="#ref-for-animation-effect①②⓪">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a>
    <li><a href="#ref-for-animation-effect①②①">5.11.1. Creating a new KeyframeEffect object</a>
    <li><a href="#ref-for-animation-effect①②②">5.12. The IterationCompositeOperation enumeration</a> <a href="#ref-for-animation-effect①②③">(2)</a>
    <li><a href="#ref-for-animation-effect①②④">5.14. The Animatable interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animation-playback-rate">
   <a href="https://drafts.csswg.org/web-animations-1/#animation-playback-rate">https://drafts.csswg.org/web-animations-1/#animation-playback-rate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-playback-rate">3.5. Animation effect speed control</a> <a href="#ref-for-animation-playback-rate①">(2)</a> <a href="#ref-for-animation-playback-rate②">(3)</a> <a href="#ref-for-animation-playback-rate③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-before-flag">
   <a href="https://drafts.csswg.org/web-animations-1/#before-flag">https://drafts.csswg.org/web-animations-1/#before-flag</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-before-flag">3.7.1. Calculating the transformed progress</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-before-phase">
   <a href="https://drafts.csswg.org/web-animations-1/#before-phase">https://drafts.csswg.org/web-animations-1/#before-phase</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-before-phase">3.3.4. Animation effect phases and
states</a>
    <li><a href="#ref-for-before-phase①">3.3.5. Fill modes</a> <a href="#ref-for-before-phase②">(2)</a> <a href="#ref-for-before-phase③">(3)</a>
    <li><a href="#ref-for-before-phase④">3.6.3.1. Calculating the active time</a> <a href="#ref-for-before-phase⑤">(2)</a> <a href="#ref-for-before-phase⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cancel-an-animation">
   <a href="https://drafts.csswg.org/web-animations-1/#cancel-an-animation">https://drafts.csswg.org/web-animations-1/#cancel-an-animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cancel-an-animation">3.2.6. Canceling an animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-keyframeeffect-composite">
   <a href="https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-composite">https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-composite</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-composite">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-finished-promise">
   <a href="https://drafts.csswg.org/web-animations-1/#current-finished-promise">https://drafts.csswg.org/web-animations-1/#current-finished-promise</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-finished-promise">4.1.1. Not animatable</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-iteration">
   <a href="https://drafts.csswg.org/web-animations-1/#current-iteration">https://drafts.csswg.org/web-animations-1/#current-iteration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-iteration">4.5. Custom effects</a>
    <li><a href="#ref-for-current-iteration①">4.5.1. Sampling custom effects</a>
    <li><a href="#ref-for-current-iteration②">5.12. The IterationCompositeOperation enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-time">
   <a href="https://drafts.csswg.org/web-animations-1/#current-time">https://drafts.csswg.org/web-animations-1/#current-time</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-time">3.3.3. Local time and inherited time</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-directed-progress">
   <a href="https://drafts.csswg.org/web-animations-1/#directed-progress">https://drafts.csswg.org/web-animations-1/#directed-progress</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-directed-progress">3.6.1. Overview</a> <a href="#ref-for-directed-progress①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-end-delay">
   <a href="https://drafts.csswg.org/web-animations-1/#end-delay">https://drafts.csswg.org/web-animations-1/#end-delay</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-end-delay">3.3.2. The active interval</a> <a href="#ref-for-end-delay①">(2)</a>
    <li><a href="#ref-for-end-delay②">3.2. Animations</a>
    <li><a href="#ref-for-end-delay③">5.4. The AnimationEffectTimingReadOnly interface</a>
    <li><a href="#ref-for-end-delay④">5.7. The
  ComputedTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fill-mode">
   <a href="https://drafts.csswg.org/web-animations-1/#fill-mode">https://drafts.csswg.org/web-animations-1/#fill-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fill-mode">3.3.4. Animation effect phases and
states</a>
    <li><a href="#ref-for-fill-mode①">3.5. Animation effect speed control</a>
    <li><a href="#ref-for-fill-mode②">3.6.3.1. Calculating the active time</a> <a href="#ref-for-fill-mode③">(2)</a> <a href="#ref-for-fill-mode④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-finished-play-state">
   <a href="https://drafts.csswg.org/web-animations-1/#finished-play-state">https://drafts.csswg.org/web-animations-1/#finished-play-state</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-finished-play-state">3.3.4. Animation effect phases and
states</a> <a href="#ref-for-finished-play-state①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-effect">
   <a href="https://drafts.csswg.org/web-animations-1/#in-effect">https://drafts.csswg.org/web-animations-1/#in-effect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-effect">4.5.1. Sampling custom effects</a> <a href="#ref-for-in-effect①">(2)</a> <a href="#ref-for-in-effect②">(3)</a> <a href="#ref-for-in-effect③">(4)</a> <a href="#ref-for-in-effect④">(5)</a> <a href="#ref-for-in-effect⑤">(6)</a>
    <li><a href="#ref-for-in-effect⑥">5.7. The
  ComputedTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-iteration-count">
   <a href="https://drafts.csswg.org/web-animations-1/#iteration-count">https://drafts.csswg.org/web-animations-1/#iteration-count</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-count">3.6.1. Overview</a>
    <li><a href="#ref-for-iteration-count①">3.6.2. Calculating the active duration</a> <a href="#ref-for-iteration-count②">(2)</a>
    <li><a href="#ref-for-iteration-count③">3.8.1. Relationship of group time to child time</a> <a href="#ref-for-iteration-count④">(2)</a> <a href="#ref-for-iteration-count⑤">(3)</a> <a href="#ref-for-iteration-count⑥">(4)</a> <a href="#ref-for-iteration-count⑦">(5)</a> <a href="#ref-for-iteration-count⑧">(6)</a> <a href="#ref-for-iteration-count⑨">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-iteration-duration">
   <a href="https://drafts.csswg.org/web-animations-1/#iteration-duration">https://drafts.csswg.org/web-animations-1/#iteration-duration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-duration">3.4.1. Iteration intervals</a> <a href="#ref-for-iteration-duration①">(2)</a>
    <li><a href="#ref-for-iteration-duration②">3.6.1. Overview</a> <a href="#ref-for-iteration-duration③">(2)</a>
    <li><a href="#ref-for-iteration-duration④">3.6.2. Calculating the active duration</a> <a href="#ref-for-iteration-duration⑤">(2)</a>
    <li><a href="#ref-for-iteration-duration⑥">3.6.3.2. Calculating the overall progress</a> <a href="#ref-for-iteration-duration⑦">(2)</a>
    <li><a href="#ref-for-iteration-duration⑧">3.7.2. Calculating the transformed time</a> <a href="#ref-for-iteration-duration⑨">(2)</a>
    <li><a href="#ref-for-iteration-duration①⓪">3.8.1. Relationship of group time to child time</a>
    <li><a href="#ref-for-iteration-duration①①">5.4. The AnimationEffectTimingReadOnly interface</a>
    <li><a href="#ref-for-iteration-duration①②">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-iteration-progress">
   <a href="https://drafts.csswg.org/web-animations-1/#iteration-progress">https://drafts.csswg.org/web-animations-1/#iteration-progress</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-progress">3.2.1. Setting the timeline of an animation</a>
    <li><a href="#ref-for-iteration-progress①">3.2.2. Setting the target effect of an
  animation</a>
    <li><a href="#ref-for-iteration-progress②">3.6.1. Overview</a> <a href="#ref-for-iteration-progress③">(2)</a> <a href="#ref-for-iteration-progress④">(3)</a> <a href="#ref-for-iteration-progress⑤">(4)</a>
    <li><a href="#ref-for-iteration-progress⑥">4.5. Custom effects</a>
    <li><a href="#ref-for-iteration-progress⑦">4.5.1. Sampling custom effects</a> <a href="#ref-for-iteration-progress⑧">(2)</a> <a href="#ref-for-iteration-progress⑨">(3)</a> <a href="#ref-for-iteration-progress①⓪">(4)</a>
    <li><a href="#ref-for-iteration-progress①①">5.13. The EffectCallback callback function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-iteration-start">
   <a href="https://drafts.csswg.org/web-animations-1/#iteration-start">https://drafts.csswg.org/web-animations-1/#iteration-start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-start">3.6.1. Overview</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-keyframe-effect">
   <a href="https://drafts.csswg.org/web-animations-1/#keyframe-effect">https://drafts.csswg.org/web-animations-1/#keyframe-effect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-keyframe-effect">3.2.3. Waiting for the target effect</a>
    <li><a href="#ref-for-keyframe-effect①">3.3.1. Types of animation effects</a>
    <li><a href="#ref-for-keyframe-effect②">4.2.1. The effect value of a keyframe effect</a> <a href="#ref-for-keyframe-effect③">(2)</a>
    <li><a href="#ref-for-keyframe-effect④">4.4. Effect accumulation</a>
    <li><a href="#ref-for-keyframe-effect⑤">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a>
    <li><a href="#ref-for-keyframe-effect⑥">5.11.1. Creating a new KeyframeEffect object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-not-animatable">
   <a href="https://drafts.csswg.org/web-animations-1/#not-animatable">https://drafts.csswg.org/web-animations-1/#not-animatable</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-not-animatable">4.1.1. Not animatable</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-overall-progress">
   <a href="https://drafts.csswg.org/web-animations-1/#overall-progress">https://drafts.csswg.org/web-animations-1/#overall-progress</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-overall-progress">3.6.1. Overview</a> <a href="#ref-for-overall-progress①">(2)</a>
    <li><a href="#ref-for-overall-progress②">3.6.3.2. Calculating the overall progress</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pause-an-animation">
   <a href="https://drafts.csswg.org/web-animations-1/#pause-an-animation">https://drafts.csswg.org/web-animations-1/#pause-an-animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pause-an-animation">3.2.5. Pausing an animation</a> <a href="#ref-for-pause-an-animation①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pending-play-task">
   <a href="https://drafts.csswg.org/web-animations-1/#pending-play-task">https://drafts.csswg.org/web-animations-1/#pending-play-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pending-play-task">3.2.2. Setting the target effect of an
  animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-play-an-animation">
   <a href="https://drafts.csswg.org/web-animations-1/#play-an-animation">https://drafts.csswg.org/web-animations-1/#play-an-animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-play-an-animation">3.2.4. Playing an animation</a>
    <li><a href="#ref-for-play-an-animation①">5.1. The AnimationTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-playback-direction">
   <a href="https://drafts.csswg.org/web-animations-1/#playback-direction">https://drafts.csswg.org/web-animations-1/#playback-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-playback-direction">3.6.1. Overview</a>
    <li><a href="#ref-for-playback-direction①">3.8.1. Relationship of group time to child time</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ready">
   <a href="https://drafts.csswg.org/web-animations-1/#ready">https://drafts.csswg.org/web-animations-1/#ready</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ready">5.1. The AnimationTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-set-the-timeline-of-an-animation">
   <a href="https://drafts.csswg.org/web-animations-1/#set-the-timeline-of-an-animation">https://drafts.csswg.org/web-animations-1/#set-the-timeline-of-an-animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-the-timeline-of-an-animation">5.2. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-simple-iteration-progress">
   <a href="https://drafts.csswg.org/web-animations-1/#simple-iteration-progress">https://drafts.csswg.org/web-animations-1/#simple-iteration-progress</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-simple-iteration-progress">3.6.1. Overview</a> <a href="#ref-for-simple-iteration-progress①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-keyframeeffect-keyframeeffect-source-source">
   <a href="https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-keyframeeffect-source-source">https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-keyframeeffect-source-source</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-keyframeeffect-source-source">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-target-effect">
   <a href="https://drafts.csswg.org/web-animations-1/#target-effect">https://drafts.csswg.org/web-animations-1/#target-effect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-target-effect">3.2.2. Setting the target effect of an
  animation</a>
    <li><a href="#ref-for-target-effect①">3.2.3. Waiting for the target effect</a>
    <li><a href="#ref-for-target-effect②">3.2.5. Pausing an animation</a> <a href="#ref-for-target-effect③">(2)</a>
    <li><a href="#ref-for-target-effect④">3.2.6. Canceling an animation</a>
    <li><a href="#ref-for-target-effect⑤">3.3. Animation effects</a> <a href="#ref-for-target-effect⑥">(2)</a>
    <li><a href="#ref-for-target-effect⑦">3.5. Animation effect speed control</a>
    <li><a href="#ref-for-target-effect⑧">5.1. The AnimationTimeline interface</a> <a href="#ref-for-target-effect⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-target-element">
   <a href="https://drafts.csswg.org/web-animations-1/#target-element">https://drafts.csswg.org/web-animations-1/#target-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-target-element">4.5.1. Sampling custom effects</a> <a href="#ref-for-target-element①">(2)</a> <a href="#ref-for-target-element②">(3)</a> <a href="#ref-for-target-element③">(4)</a> <a href="#ref-for-target-element④">(5)</a>
    <li><a href="#ref-for-target-element⑤">5.13. The EffectCallback callback function</a> <a href="#ref-for-target-element⑥">(2)</a> <a href="#ref-for-target-element⑦">(3)</a> <a href="#ref-for-target-element⑧">(4)</a> <a href="#ref-for-target-element⑨">(5)</a>
    <li><a href="#ref-for-target-element①⓪">5.14. The Animatable interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-target-property">
   <a href="https://drafts.csswg.org/web-animations-1/#target-property">https://drafts.csswg.org/web-animations-1/#target-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-target-property">4.2.1. The effect value of a keyframe effect</a>
    <li><a href="#ref-for-target-property①">4.5.2. Execution order of custom effects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-time-value">
   <a href="https://drafts.csswg.org/web-animations-1/#time-value">https://drafts.csswg.org/web-animations-1/#time-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-time-value">3.3.3. Local time and inherited time</a> <a href="#ref-for-time-value①">(2)</a>
    <li><a href="#ref-for-time-value②">3.6.3.1. Calculating the active time</a> <a href="#ref-for-time-value③">(2)</a> <a href="#ref-for-time-value④">(3)</a> <a href="#ref-for-time-value⑤">(4)</a> <a href="#ref-for-time-value⑥">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-timeline">
   <a href="https://drafts.csswg.org/web-animations-1/#timeline">https://drafts.csswg.org/web-animations-1/#timeline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-timeline">5.1. The AnimationTimeline interface</a>
    <li><a href="#ref-for-timeline①">5.2. The Animation interface</a> <a href="#ref-for-timeline②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-transformed-progress">
   <a href="https://drafts.csswg.org/web-animations-1/#transformed-progress">https://drafts.csswg.org/web-animations-1/#transformed-progress</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transformed-progress">3.6.1. Overview</a> <a href="#ref-for-transformed-progress①">(2)</a> <a href="#ref-for-transformed-progress②">(3)</a>
    <li><a href="#ref-for-transformed-progress③">3.7.2. Calculating the transformed time</a> <a href="#ref-for-transformed-progress④">(2)</a> <a href="#ref-for-transformed-progress⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-unresolved">
   <a href="https://drafts.csswg.org/web-animations-1/#unresolved">https://drafts.csswg.org/web-animations-1/#unresolved</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unresolved">3.2.1. Setting the timeline of an animation</a>
    <li><a href="#ref-for-unresolved①">3.2.2. Setting the target effect of an
  animation</a> <a href="#ref-for-unresolved②">(2)</a>
    <li><a href="#ref-for-unresolved③">3.2.6. Canceling an animation</a>
    <li><a href="#ref-for-unresolved④">3.3.3. Local time and inherited time</a> <a href="#ref-for-unresolved⑤">(2)</a> <a href="#ref-for-unresolved⑥">(3)</a>
    <li><a href="#ref-for-unresolved⑦">3.6.3.1. Calculating the active time</a> <a href="#ref-for-unresolved⑧">(2)</a> <a href="#ref-for-unresolved⑨">(3)</a> <a href="#ref-for-unresolved①⓪">(4)</a> <a href="#ref-for-unresolved①①">(5)</a> <a href="#ref-for-unresolved①②">(6)</a>
    <li><a href="#ref-for-unresolved①③">3.7.2. Calculating the transformed time</a> <a href="#ref-for-unresolved①④">(2)</a>
    <li><a href="#ref-for-unresolved①⑤">4.5.1. Sampling custom effects</a> <a href="#ref-for-unresolved①⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-update-animations-and-send-events">
   <a href="https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events">https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-animations-and-send-events">4.5. Custom effects</a>
    <li><a href="#ref-for-update-animations-and-send-events①">4.5.1. Sampling custom effects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">5.1. The AnimationTimeline interface</a>
    <li><a href="#ref-for-Exposed①">5.3. The AnimationEffectReadOnly interface</a>
    <li><a href="#ref-for-Exposed②">5.4. The AnimationEffectTimingReadOnly interface</a>
    <li><a href="#ref-for-Exposed③">5.5. The AnimationEffectTiming interface</a>
    <li><a href="#ref-for-Exposed④">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-Exposed⑤">(2)</a>
    <li><a href="#ref-for-Exposed⑥">5.9. The AnimationNodeList interface</a>
    <li><a href="#ref-for-Exposed⑦">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a> <a href="#ref-for-Exposed⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-NoInterfaceObject">
   <a href="https://heycam.github.io/webidl/#NoInterfaceObject">https://heycam.github.io/webidl/#NoInterfaceObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-NoInterfaceObject">5.3. The AnimationEffectReadOnly interface</a>
    <li><a href="#ref-for-NoInterfaceObject①">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">5.4. The AnimationEffectTimingReadOnly interface</a> <a href="#ref-for-idl-double①">(2)</a>
    <li><a href="#ref-for-idl-double②">5.5. The AnimationEffectTiming interface</a> <a href="#ref-for-idl-double③">(2)</a>
    <li><a href="#ref-for-idl-double④">5.6. The AnimationEffectTimingProperties dictionary</a> <a href="#ref-for-idl-double⑤">(2)</a>
    <li><a href="#ref-for-idl-double⑥">5.7. The
  ComputedTimingProperties dictionary</a> <a href="#ref-for-idl-double⑦">(2)</a>
    <li><a href="#ref-for-idl-double⑧">5.13. The EffectCallback callback function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-throw">
   <a href="https://heycam.github.io/webidl/#dfn-throw">https://heycam.github.io/webidl/#dfn-throw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-throw">5.3. The AnimationEffectReadOnly interface</a> <a href="#ref-for-dfn-throw①">(2)</a> <a href="#ref-for-dfn-throw②">(3)</a>
    <li><a href="#ref-for-dfn-throw③">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-dfn-throw④">(2)</a>
    <li><a href="#ref-for-dfn-throw⑤">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long">https://heycam.github.io/webidl/#idl-unsigned-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long">5.9. The AnimationNodeList interface</a> <a href="#ref-for-idl-unsigned-long①">(2)</a> <a href="#ref-for-idl-unsigned-long②">(3)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-easing-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-linear-easing-function" style="color:initial">linear timing function</span>
     <li><span class="dfn-paneled" id="term-for-easing-function" style="color:initial">timing function</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-pseudo-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-csspseudoelement" style="color:initial">CSSPseudoElement</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-accumulation" style="color:initial">value accumulation</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-visibility" style="color:initial">visibility</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[ECMASCRIPT]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-code-realms" style="color:initial">code realms</span>
     <li><span class="dfn-paneled" id="term-for-sec-execution-contexts" style="color:initial">execution contexts</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WEB-ANIMATIONS-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-animation" style="color:initial">Animation</span>
     <li><span class="dfn-paneled" id="term-for-dom-animation-animation" style="color:initial">Animation(effect, timeline)</span>
     <li><span class="dfn-paneled" id="term-for-animationtimeline" style="color:initial">AnimationTimeline</span>
     <li><span class="dfn-paneled" id="term-for-keyframeeffect" style="color:initial">KeyframeEffect</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-keyframeeffectoptions" style="color:initial">KeyframeEffectOptions</span>
     <li><span class="dfn-paneled" id="term-for-active-interval" style="color:initial">active interval</span>
     <li><span class="dfn-paneled" id="term-for-active-phase" style="color:initial">active phase</span>
     <li><span class="dfn-paneled" id="term-for-active-time" style="color:initial">active time</span>
     <li><span class="dfn-paneled" id="term-for-after-phase" style="color:initial">after phase</span>
     <li><span class="dfn-paneled" id="term-for-animation①" style="color:initial">animation</span>
     <li><span class="dfn-paneled" id="term-for-animation-effect" style="color:initial">animation effect</span>
     <li><span class="dfn-paneled" id="term-for-animation-playback-rate" style="color:initial">animation playback rate</span>
     <li><span class="dfn-paneled" id="term-for-before-flag" style="color:initial">before flag</span>
     <li><span class="dfn-paneled" id="term-for-before-phase" style="color:initial">before phase</span>
     <li><span class="dfn-paneled" id="term-for-cancel-an-animation" style="color:initial">cancel an animation</span>
     <li><span class="dfn-paneled" id="term-for-dom-keyframeeffect-composite" style="color:initial">composite</span>
     <li><span class="dfn-paneled" id="term-for-current-finished-promise" style="color:initial">current finished promise</span>
     <li><span class="dfn-paneled" id="term-for-current-iteration" style="color:initial">current iteration</span>
     <li><span class="dfn-paneled" id="term-for-current-time" style="color:initial">current time</span>
     <li><span class="dfn-paneled" id="term-for-directed-progress" style="color:initial">directed progress</span>
     <li><span class="dfn-paneled" id="term-for-end-delay" style="color:initial">end delay</span>
     <li><span class="dfn-paneled" id="term-for-fill-mode" style="color:initial">fill mode</span>
     <li><span class="dfn-paneled" id="term-for-finished-play-state" style="color:initial">finished play state</span>
     <li><span class="dfn-paneled" id="term-for-in-effect" style="color:initial">in effect</span>
     <li><span class="dfn-paneled" id="term-for-iteration-count" style="color:initial">iteration count</span>
     <li><span class="dfn-paneled" id="term-for-iteration-duration" style="color:initial">iteration duration</span>
     <li><span class="dfn-paneled" id="term-for-iteration-progress" style="color:initial">iteration progress</span>
     <li><span class="dfn-paneled" id="term-for-iteration-start" style="color:initial">iteration start</span>
     <li><span class="dfn-paneled" id="term-for-keyframe-effect" style="color:initial">keyframe effect</span>
     <li><span class="dfn-paneled" id="term-for-not-animatable" style="color:initial">not animatable</span>
     <li><span class="dfn-paneled" id="term-for-overall-progress" style="color:initial">overall progress</span>
     <li><span class="dfn-paneled" id="term-for-pause-an-animation" style="color:initial">pause an animation</span>
     <li><span class="dfn-paneled" id="term-for-pending-play-task" style="color:initial">pending play task</span>
     <li><span class="dfn-paneled" id="term-for-play-an-animation" style="color:initial">play an animation</span>
     <li><span class="dfn-paneled" id="term-for-playback-direction" style="color:initial">playback direction</span>
     <li><span class="dfn-paneled" id="term-for-ready" style="color:initial">ready</span>
     <li><span class="dfn-paneled" id="term-for-set-the-timeline-of-an-animation" style="color:initial">set the timeline of an animation</span>
     <li><span class="dfn-paneled" id="term-for-simple-iteration-progress" style="color:initial">simple iteration progress</span>
     <li><span class="dfn-paneled" id="term-for-dom-keyframeeffect-keyframeeffect-source-source" style="color:initial">source</span>
     <li><span class="dfn-paneled" id="term-for-target-effect" style="color:initial">target effect</span>
     <li><span class="dfn-paneled" id="term-for-target-element" style="color:initial">target element</span>
     <li><span class="dfn-paneled" id="term-for-target-property" style="color:initial">target property</span>
     <li><span class="dfn-paneled" id="term-for-time-value" style="color:initial">time value</span>
     <li><span class="dfn-paneled" id="term-for-timeline" style="color:initial">timeline</span>
     <li><span class="dfn-paneled" id="term-for-transformed-progress" style="color:initial">transformed progress</span>
     <li><span class="dfn-paneled" id="term-for-unresolved" style="color:initial">unresolved</span>
     <li><span class="dfn-paneled" id="term-for-update-animations-and-send-events" style="color:initial">update animations and send events</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-NoInterfaceObject" style="color:initial">NoInterfaceObject</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
     <li><span class="dfn-paneled" id="term-for-dfn-throw" style="color:initial">throw</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long" style="color:initial">unsigned long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-easing-1">[CSS-EASING-1]
   <dd>Brian Birtles; Dean Jackson; Matt Rakow. <a href="https://www.w3.org/TR/css-easing-1/">CSS Easing Functions Level 1</a>. 30 April 2019. CR. URL: <a href="https://www.w3.org/TR/css-easing-1/">https://www.w3.org/TR/css-easing-1/</a>
   <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4]
   <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 25 February 2019. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-ecmascript">[ECMASCRIPT]
   <dd><a href="https://tc39.github.io/ecma262/">ECMAScript Language Specification</a>. URL: <a href="https://tc39.github.io/ecma262/">https://tc39.github.io/ecma262/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-web-animations-1">[WEB-ANIMATIONS-1]
   <dd>Brian Birtles; et al. <a href="https://www.w3.org/TR/web-animations-1/">Web Animations</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/web-animations-1/">https://www.w3.org/TR/web-animations-1/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑨"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline④"><c- g>AnimationTimeline</c-></a> {
    <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①④①"><c- n>Animation</c-></a> <a class="idl-code" data-link-type="method" href="#dom-animationtimeline-play" id="ref-for-dom-animationtimeline-play①"><c- g>play</c-></a> (<c- b>optional</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="argument" href="#dom-animationtimeline-play-effect-effect" id="ref-for-dom-animationtimeline-play-effect-effect①"><c- g>effect</c-></a> = <c- b>null</c->);
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②⓪①"><c- g>Animation</c-></a> {
               <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline②①"><c- n>AnimationTimeline</c-></a>?       <a class="idl-code" data-link-type="attribute" data-type="AnimationTimeline?" href="#dom-animation-timeline" id="ref-for-dom-animation-timeline①"><c- g>timeline</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>AnimationEffectReadOnly</c-></a> {
    // Timing hierarchy
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly①②"><c- n>GroupEffectReadOnly</c-></a>?     <a class="idl-code" data-link-type="attribute" data-readonly data-type="GroupEffectReadOnly?" href="#dom-animationeffectreadonly-parent" id="ref-for-dom-animationeffectreadonly-parent①"><c- g>parent</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffectReadOnly?" href="#dom-animationeffectreadonly-previoussibling" id="ref-for-dom-animationeffectreadonly-previoussibling①"><c- g>previousSibling</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffectReadOnly?" href="#dom-animationeffectreadonly-nextsibling" id="ref-for-dom-animationeffectreadonly-nextsibling①"><c- g>nextSibling</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NoInterfaceObject" id="ref-for-NoInterfaceObject②"><c- g>NoInterfaceObject</c-></a>]
<c- b>interface</c-> <a href="#animationeffectmutable"><code><c- g>AnimationEffectMutable</c-></code></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationeffectmutable-before" id="ref-for-dom-animationeffectmutable-before①"><c- g>before</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <a href="#dom-animationeffectmutable-before-effects-effects"><code><c- g>effects</c-></code></a>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationeffectmutable-after" id="ref-for-dom-animationeffectmutable-after①"><c- g>after</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <a href="#dom-animationeffectmutable-after-effects-effects"><code><c- g>effects</c-></code></a>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationeffectmutable-replace" id="ref-for-dom-animationeffectmutable-replace①"><c- g>replace</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <a href="#dom-animationeffectmutable-replace-effects-effects"><code><c- g>effects</c-></code></a>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationeffectmutable-remove" id="ref-for-dom-animationeffectmutable-remove①"><c- g>remove</c-></a> ();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>AnimationEffectTimingReadOnly</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑨"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-animationeffecttimingreadonly-playbackrate" id="ref-for-dom-animationeffecttimingreadonly-playbackrate②"><c- g>playbackRate</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>AnimationEffectTiming</c-></a> : <a class="n" data-link-type="idl-name"><c- n>AnimationEffectTimingReadOnly</c-></a> {
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①"><c- b>double</c-></a>                             <a class="idl-code" data-link-type="attribute" data-type="double" href="#dom-animationeffecttiming-playbackrate" id="ref-for-dom-animationeffecttiming-playbackrate②"><c- g>playbackRate</c-></a>;
};

<c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary"><c- g>AnimationEffectTimingProperties</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④①"><c- b>double</c-></a> <a class="idl-code" data-default="1.0" data-link-type="dict-member" data-type="double " href="#dom-animationeffecttimingproperties-playbackrate" id="ref-for-dom-animationeffecttimingproperties-playbackrate①"><c- g>playbackRate</c-></a> = 1.0;
};

<c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary"><c- g>ComputedTimingProperties</c-></a> : <a class="n" data-link-type="idl-name"><c- n>AnimationEffectTimingProperties</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥①"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-computedtimingproperties-starttime" id="ref-for-dom-computedtimingproperties-starttime①"><c- g>startTime</c-></a>;
};

<c- b>enum</c-> <a href="#enumdef-fillmode"><code><c- g>FillMode</c-></code></a> { <a href="#dom-fillmode-none"><code><c- s>"none"</c-></code></a>, <a href="#dom-fillmode-forwards"><code><c- s>"forwards"</c-></code></a>, <a href="#dom-fillmode-backwards"><code><c- s>"backwards"</c-></code></a>, <a href="#dom-fillmode-both"><code><c- s>"both"</c-></code></a>, <a href="#dom-fillmode-auto"><code><c- s>"auto"</c-></code></a> };

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④①"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 Constructor (sequence? children,
              optional (unrestricted double or AnimationEffectTimingProperties) timing)]
<c- b>interface</c-> <a href="#groupeffectreadonly"><code><c- g>GroupEffectReadOnly</c-></code></a> : <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#animationnodelist" id="ref-for-animationnodelist③"><c- n>AnimationNodeList</c-></a>      <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationNodeList" href="#dom-groupeffectreadonly-children" id="ref-for-dom-groupeffectreadonly-children①"><c- g>children</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffectReadOnly?" href="#dom-groupeffectreadonly-firstchild" id="ref-for-dom-groupeffectreadonly-firstchild①"><c- g>firstChild</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="AnimationEffectReadOnly?" href="#dom-groupeffectreadonly-lastchild" id="ref-for-dom-groupeffectreadonly-lastchild①"><c- g>lastChild</c-></a>;
    <a class="n" data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect②①"><c- n>GroupEffect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-groupeffectreadonly-clone" id="ref-for-dom-groupeffectreadonly-clone②"><c- g>clone</c-></a> ();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NoInterfaceObject" id="ref-for-NoInterfaceObject①①"><c- g>NoInterfaceObject</c-></a>]
<c- b>interface</c-> <a href="#groupeffectmutable"><code><c- g>GroupEffectMutable</c-></code></a> {
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-groupeffectmutable-prepend" id="ref-for-dom-groupeffectmutable-prepend①"><c- g>prepend</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <a href="#dom-groupeffectmutable-prepend-effects-effects"><code><c- g>effects</c-></code></a>);
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-groupeffectmutable-append" id="ref-for-dom-groupeffectmutable-append②"><c- g>append</c-></a> (<a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>... <a href="#dom-groupeffectmutable-append-effects-effects"><code><c- g>effects</c-></code></a>);
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤①"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 Constructor (sequence? children,
              optional (unrestricted double or AnimationEffectTimingProperties) timing)]
<c- b>interface</c-> <a href="#groupeffect"><code><c- g>GroupEffect</c-></code></a> : <a class="n" data-link-type="idl-name" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly④①"><c- n>GroupEffectReadOnly</c-></a> {
};
<a class="n" data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect③①"><c- n>GroupEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#animationeffectmutable" id="ref-for-animationeffectmutable①①"><c- n>AnimationEffectMutable</c-></a>;
<a class="n" data-link-type="idl-name" href="#groupeffect" id="ref-for-groupeffect④①"><c- n>GroupEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#groupeffectmutable" id="ref-for-groupeffectmutable③"><c- n>GroupEffectMutable</c-></a>;

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑥①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#animationnodelist"><code><c- g>AnimationNodeList</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long③"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-animationnodelist-length" id="ref-for-dom-animationnodelist-length①"><c- g>length</c-></a>;
    <c- b>getter</c-> <a class="n" data-link-type="idl-name"><c- n>AnimationEffectReadOnly</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-animationnodelist-item" id="ref-for-dom-animationnodelist-item①"><c- g>item</c-></a> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①①"><c- b>unsigned</c-> <c- b>long</c-></a> <a href="#dom-animationnodelist-item-index-index"><code><c- g>index</c-></code></a>);
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑦①"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 Constructor (sequence? children,
              optional (unrestricted double or AnimationEffectTimingProperties) timing)]
<c- b>interface</c-> <a href="#sequenceeffectreadonly"><code><c- g>SequenceEffectReadOnly</c-></code></a> : <a class="n" data-link-type="idl-name" href="#groupeffectreadonly" id="ref-for-groupeffectreadonly①⓪①"><c- n>GroupEffectReadOnly</c-></a> {
    <a class="n" data-link-type="idl-name" href="#sequenceeffect" id="ref-for-sequenceeffect②①"><c- n>SequenceEffect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-sequenceeffectreadonly-clone" id="ref-for-dom-sequenceeffectreadonly-clone①"><c- g>clone</c-></a> ();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑧①"><c- g>Exposed</c-></a>=<c- n>Window</c->,
 Constructor (sequence? children,
              optional (unrestricted double or AnimationEffectTimingProperties) timing)]
<c- b>interface</c-> <a href="#sequenceeffect"><code><c- g>SequenceEffect</c-></code></a> : <a class="n" data-link-type="idl-name" href="#sequenceeffectreadonly" id="ref-for-sequenceeffectreadonly①①"><c- n>SequenceEffectReadOnly</c-></a> {
};
<a class="n" data-link-type="idl-name" href="#sequenceeffect" id="ref-for-sequenceeffect③①"><c- n>SequenceEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#animationeffectmutable" id="ref-for-animationeffectmutable②①"><c- n>AnimationEffectMutable</c-></a>;
<a class="n" data-link-type="idl-name" href="#sequenceeffect" id="ref-for-sequenceeffect④①"><c- n>SequenceEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#groupeffectmutable" id="ref-for-groupeffectmutable②①"><c- n>GroupEffectMutable</c-></a>;

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/web-animations-1/#keyframeeffect" id="ref-for-keyframeeffect①①"><c- g>KeyframeEffect</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation④"><c- n>IterationCompositeOperation</c-></a>    <a class="idl-code" data-link-type="attribute" data-type="IterationCompositeOperation" href="#dom-keyframeeffect-iterationcomposite" id="ref-for-dom-keyframeeffect-iterationcomposite②"><c- g>iterationComposite</c-></a>;
};

<a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#keyframeeffect" id="ref-for-keyframeeffect②①"><c- n>KeyframeEffect</c-></a> <c- b>implements</c-> <a class="n" data-link-type="idl-name" href="#animationeffectmutable" id="ref-for-animationeffectmutable③①"><c- n>AnimationEffectMutable</c-></a>;

<c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://drafts.csswg.org/web-animations-1/#dictdef-keyframeeffectoptions" id="ref-for-dictdef-keyframeeffectoptions①①"><c- g>KeyframeEffectOptions</c-></a> {
    <a class="n" data-link-type="idl-name" href="#enumdef-iterationcompositeoperation" id="ref-for-enumdef-iterationcompositeoperation②①"><c- n>IterationCompositeOperation</c-></a> <a class="idl-code" data-default="&quot;replace&quot;" data-link-type="dict-member" data-type="IterationCompositeOperation " href="#dom-keyframeeffectoptions-iterationcomposite" id="ref-for-dom-keyframeeffectoptions-iterationcomposite①"><c- g>iterationComposite</c-></a> = "replace";
};

<c- b>enum</c-> <a href="#enumdef-iterationcompositeoperation"><code><c- g>IterationCompositeOperation</c-></code></a> { <a href="#dom-iterationcompositeoperation-replace"><code><c- s>"replace"</c-></code></a>, <a href="#dom-iterationcompositeoperation-accumulate"><code><c- s>"accumulate"</c-></code></a> };

<c- b>callback</c-> <a href="#callbackdef-effectcallback"><code><c- g>EffectCallback</c-></code></a> = <c- b>void</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑧①"><c- b>double</c-></a>? <a href="#dom-effectcallback-progress"><code><c- g>progress</c-></code></a>,
                                (<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①"><c- n>Element</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/css-pseudo-4/#csspseudoelement" id="ref-for-csspseudoelement①"><c- n>CSSPseudoElement</c-></a>) <a href="#dom-effectcallback-currenttarget"><code><c- g>currentTarget</c-></code></a>,
                                <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②④①"><c- n>Animation</c-></a> <a href="#dom-effectcallback-animation"><code><c- g>animation</c-></code></a>);

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> If <var>new timeline</var> is null, we should ensure that <a data-link-type="dfn" href="#custom-effect">custom
effects</a> get called with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved">unresolved</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#iteration-progress">iteration progress</a> (unless a subsequent change in the same script execution context makes this
redundant).<a href="#issue-dd65d327"> ↵ </a></div>
   <div class="issue">
     This is not quite right. If <var>old effect</var> is attached to another
  animation in the same task then we should probably not do an extra
  callback with <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#unresolved">unresolved</a>. 
    <p>The definition of when <a data-link-type="dfn" href="#custom-effect">custom effects</a> gets called needs to be
  audited and probably rewritten.</p>
     <a href="#issue-ddad0532"> ↵ </a>
   </div>
   <div class="issue"> The procedures for calling custom effects need to be reworked.
       Currently they probably involve calling too often for changes that
       could be coalesced.<a href="#issue-5b6104df"> ↵ </a></div>
   <div class="issue">
     Currently <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function">timing functions</a> that generate results outside the
range [0, 1] will behave unexpectedly when applied to group
effects, as children will increase iterations or enter into fill mode
rather than continuing to extrapolate along their defined behavior
(which is what they would do if the timing function applied to them
directly). 
    <p>To fix this it is possible we will wish to introduce ‘overflow’
fill modes that respond to time values larger than or smaller than the
active time range by extrapolating rather than filling.</p>
    <p>See <a href="http://lists.w3.org/Archives/Public/public-fx/2013AprJun/0184.html">section
15 (Overflowing fill) of minuted discussion from Tokyo 2013 F2F</a>.</p>
     <a href="#issue-e54c2365"> ↵ </a>
   </div>
   <div class="issue">
     Currently, the set of <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#easing-function">timing functions</a> allowed on
a <a data-link-type="dfn" href="#group-effect">group effect</a> is not restricted.
This has raised concern about complexity of implementation and also
complexity of behavior with regards to fill modes.
As a result, allowing the full set of timing functions on group
effects is considered <strong>at risk</strong>. 
    <p>Alternatives are to either restrict timing functions on group
effects to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-easing-1/#linear-easing-function">linear timing function</a> or to a set of
“simple” timing functions that have properties that
alleviate some of the concerns with the more complex timing
functions.</p>
    <p>See <a href="http://lists.w3.org/Archives/Public/public-fx/2013JulSep/0076.html">section
2 of the discussion from August 2013</a>.</p>
    <a href="#issue-b2228569"> ↵ </a>
   </div>
   <div class="issue"> This whole feature needs to be revisited. The current thinking is that
       rather than having custom effects, we should simply have an <code>onupdate</code> callback on each <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-effect">animation effect</a>.  That
       would allow, for example, augmenting an existing effect with a function
       that performs logging or triggers additional actions at certain times.
       With the current arrangement, doing this would require adding a parent
       group just to achieve this.<a href="#issue-3b34db07"> ↵ </a></div>
   <div class="issue"> It needs to be called whenever timing properties are updated too, right?<a href="#issue-e49078ba"> ↵ </a></div>
   <div class="issue">
     There may be use cases where an action needs to be triggered at
a specific point in an animation tree.
In many cases this can be achieved by inserting a custom effect with
a step-start easing that spans the period during which the action
should be triggered.
However, this can impose additional layout requirements on the
content which might be cumbersome to accomodate. 
    <p>Some alternatives under consideration:</p>
    <ul>
     <li data-md>
      <p>Additional calling conditions could be defined to accommodate
zero-width custom effects. For example, it could be required
that the callback be called if (given infinite precision) there
was a time between the previous and current update times that
aligned with the custom effect.</p>
     <li data-md>
      <p>Instead of adding special calling conditions to custom effects,
a new type of animation effect, Trigger, could be introduced. The
trigger would only ever act as a zero-width custom effect as
described above, its constructor would take a callback function,
but not require a target or timing. It could also specify other
calling conventions, for example whether it should only trigger
in a specific playback direction.</p>
    </ul>
     <a href="#issue-c3b02b8f"> ↵ </a>
   </div>
   <div class="issue"> Need to define this more precisely.
    Are styles flushed?
    Presumably they are.
    Can we suspend reflow for the duration of executing the script-based
    animation effects and just do it once afterwards?<a href="#issue-df790f19"> ↵ </a></div>
   <div class="issue"> It has been suggested this method be renamed, or even removed
(see <a href="https://github.com/w3ctag/spec-reviews/blob/master/2013/10/Web%20Animations.md#issue-play-method">TAG
feedback</a>).<a href="#issue-6fb09aae"> ↵ </a></div>
   <div class="issue"> Need to define the start behavior when <var>effect</var> is null.<a href="#issue-befeaed2"> ↵ </a></div>
   <div class="issue"> Should this be <code>parentGroup</code>?<a href="#issue-40288bfc"> ↵ </a></div>
   <div class="issue"> The <code>remove()</code> method can be used to remove an effect from
either its parent group or animation. Should we keep it in level 1 and define it
simply as removing the animation from its animation?<a href="#issue-49ccd991"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="directly-associated-with-an-animation">
   <b><a href="#directly-associated-with-an-animation">#directly-associated-with-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-directly-associated-with-an-animation">3.3. Animation effects</a> <a href="#ref-for-directly-associated-with-an-animation①">(2)</a> <a href="#ref-for-directly-associated-with-an-animation②">(3)</a>
    <li><a href="#ref-for-directly-associated-with-an-animation③">3.3.3. Local time and inherited time</a>
    <li><a href="#ref-for-directly-associated-with-an-animation④">3.3.4. Animation effect phases and
states</a>
    <li><a href="#ref-for-directly-associated-with-an-animation⑤">3.8. Grouping and synchronization</a> <a href="#ref-for-directly-associated-with-an-animation⑥">(2)</a>
    <li><a href="#ref-for-directly-associated-with-an-animation⑦">5.8.2. Definitions for manipulating hierarchies</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="associated-with-an-animation">
   <b><a href="#associated-with-an-animation">#associated-with-an-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-associated-with-an-animation">3.3.4. Animation effect phases and
states</a>
    <li><a href="#ref-for-associated-with-an-animation①">5.7. The
  ComputedTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-effect-start-time">
   <b><a href="#animation-effect-start-time">#animation-effect-start-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-effect-start-time">3.3.2. The active interval</a>
    <li><a href="#ref-for-animation-effect-start-time①">3.2. Animations</a> <a href="#ref-for-animation-effect-start-time②">(2)</a> <a href="#ref-for-animation-effect-start-time③">(3)</a> <a href="#ref-for-animation-effect-start-time④">(4)</a> <a href="#ref-for-animation-effect-start-time⑤">(5)</a> <a href="#ref-for-animation-effect-start-time⑥">(6)</a> <a href="#ref-for-animation-effect-start-time⑦">(7)</a> <a href="#ref-for-animation-effect-start-time⑧">(8)</a>
    <li><a href="#ref-for-animation-effect-start-time⑨">3.3.3. Local time and inherited time</a> <a href="#ref-for-animation-effect-start-time①⓪">(2)</a> <a href="#ref-for-animation-effect-start-time①①">(3)</a> <a href="#ref-for-animation-effect-start-time①②">(4)</a> <a href="#ref-for-animation-effect-start-time①③">(5)</a>
    <li><a href="#ref-for-animation-effect-start-time①④">3.6.1. Overview</a>
    <li><a href="#ref-for-animation-effect-start-time①⑤">3.8.2. The start time of
  children of a group effect</a>
    <li><a href="#ref-for-animation-effect-start-time①⑥">3.8.4. Sequence effects</a>
    <li><a href="#ref-for-animation-effect-start-time①⑦">3.8.4.1. The start time of
  children of a sequence effect</a> <a href="#ref-for-animation-effect-start-time①⑧">(2)</a> <a href="#ref-for-animation-effect-start-time①⑨">(3)</a> <a href="#ref-for-animation-effect-start-time②⓪">(4)</a> <a href="#ref-for-animation-effect-start-time②①">(5)</a> <a href="#ref-for-animation-effect-start-time②②">(6)</a>
    <li><a href="#ref-for-animation-effect-start-time②③">3.8.4.2. The intrinsic
  iteration duration of a sequence effect</a>
    <li><a href="#ref-for-animation-effect-start-time②④">5.4. The AnimationEffectTimingReadOnly interface</a> <a href="#ref-for-animation-effect-start-time②⑤">(2)</a>
    <li><a href="#ref-for-animation-effect-start-time②⑥">5.7. The
  ComputedTimingProperties dictionary</a> <a href="#ref-for-animation-effect-start-time②⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="start-delay">
   <b><a href="#start-delay">#start-delay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-start-delay">3.3.2. The active interval</a>
    <li><a href="#ref-for-start-delay①">3.2. Animations</a> <a href="#ref-for-start-delay②">(2)</a> <a href="#ref-for-start-delay③">(3)</a> <a href="#ref-for-start-delay④">(4)</a>
    <li><a href="#ref-for-start-delay⑤">3.3.3. Local time and inherited time</a> <a href="#ref-for-start-delay⑥">(2)</a>
    <li><a href="#ref-for-start-delay⑦">3.5. Animation effect speed control</a>
    <li><a href="#ref-for-start-delay⑧">3.6.1. Overview</a>
    <li><a href="#ref-for-start-delay⑨">3.6.3.1. Calculating the active time</a>
    <li><a href="#ref-for-start-delay①⓪">3.8.4.1. The start time of
  children of a sequence effect</a> <a href="#ref-for-start-delay①①">(2)</a> <a href="#ref-for-start-delay①②">(3)</a> <a href="#ref-for-start-delay①③">(4)</a> <a href="#ref-for-start-delay①④">(5)</a> <a href="#ref-for-start-delay①⑤">(6)</a>
    <li><a href="#ref-for-start-delay①⑥">5.4. The AnimationEffectTimingReadOnly interface</a>
    <li><a href="#ref-for-start-delay①⑦">5.7. The
  ComputedTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="end-time">
   <b><a href="#end-time">#end-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-end-time">3.2. Animations</a>
    <li><a href="#ref-for-end-time①">3.8.3. The intrinsic
  iteration duration of a group effect</a>
    <li><a href="#ref-for-end-time②">3.8.4.1. The start time of
  children of a sequence effect</a> <a href="#ref-for-end-time③">(2)</a>
    <li><a href="#ref-for-end-time④">5.7. The
  ComputedTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inherited-time">
   <b><a href="#inherited-time">#inherited-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inherited-time">3.2. Animations</a> <a href="#ref-for-inherited-time①">(2)</a>
    <li><a href="#ref-for-inherited-time②">3.3.3. Local time and inherited time</a> <a href="#ref-for-inherited-time③">(2)</a> <a href="#ref-for-inherited-time④">(3)</a> <a href="#ref-for-inherited-time⑤">(4)</a>
    <li><a href="#ref-for-inherited-time⑥">3.4.2. Iteration time space</a>
    <li><a href="#ref-for-inherited-time⑦">3.6.1. Overview</a> <a href="#ref-for-inherited-time⑧">(2)</a> <a href="#ref-for-inherited-time⑨">(3)</a>
    <li><a href="#ref-for-inherited-time①⓪">3.8. Grouping and synchronization</a>
    <li><a href="#ref-for-inherited-time①①">5.7. The
  ComputedTimingProperties dictionary</a> <a href="#ref-for-inherited-time①②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="local-time">
   <b><a href="#local-time">#local-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-local-time">3.2. Animations</a>
    <li><a href="#ref-for-local-time①">3.3.3. Local time and inherited time</a> <a href="#ref-for-local-time②">(2)</a> <a href="#ref-for-local-time③">(3)</a> <a href="#ref-for-local-time④">(4)</a>
    <li><a href="#ref-for-local-time⑤">3.4.2. Iteration time space</a>
    <li><a href="#ref-for-local-time⑥">3.5. Animation effect speed control</a> <a href="#ref-for-local-time⑦">(2)</a> <a href="#ref-for-local-time⑧">(3)</a>
    <li><a href="#ref-for-local-time⑨">3.6.1. Overview</a> <a href="#ref-for-local-time①⓪">(2)</a> <a href="#ref-for-local-time①①">(3)</a> <a href="#ref-for-local-time①②">(4)</a> <a href="#ref-for-local-time①③">(5)</a> <a href="#ref-for-local-time①④">(6)</a>
    <li><a href="#ref-for-local-time①⑤">3.6.3.1. Calculating the active time</a> <a href="#ref-for-local-time①⑥">(2)</a>
    <li><a href="#ref-for-local-time①⑦">5.4. The AnimationEffectTimingReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="in-play">
   <b><a href="#in-play">#in-play</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-play">3.3.4. Animation effect phases and
states</a> <a href="#ref-for-in-play①">(2)</a> <a href="#ref-for-in-play②">(3)</a> <a href="#ref-for-in-play③">(4)</a> <a href="#ref-for-in-play④">(5)</a> <a href="#ref-for-in-play⑤">(6)</a>
    <li><a href="#ref-for-in-play⑥">3.4.3. Interval timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current">
   <b><a href="#current">#current</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current">3.3.4. Animation effect phases and
states</a> <a href="#ref-for-current①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intrinsic-iteration-duration">
   <b><a href="#intrinsic-iteration-duration">#intrinsic-iteration-duration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intrinsic-iteration-duration">3.4.1. Iteration intervals</a> <a href="#ref-for-intrinsic-iteration-duration①">(2)</a>
    <li><a href="#ref-for-intrinsic-iteration-duration②">3.8.3. The intrinsic
  iteration duration of a group effect</a> <a href="#ref-for-intrinsic-iteration-duration③">(2)</a> <a href="#ref-for-intrinsic-iteration-duration④">(3)</a> <a href="#ref-for-intrinsic-iteration-duration⑤">(4)</a>
    <li><a href="#ref-for-intrinsic-iteration-duration⑥">3.8.4.2. The intrinsic
  iteration duration of a sequence effect</a> <a href="#ref-for-intrinsic-iteration-duration⑦">(2)</a> <a href="#ref-for-intrinsic-iteration-duration⑧">(3)</a>
    <li><a href="#ref-for-intrinsic-iteration-duration⑨">5.3. The AnimationEffectReadOnly interface</a>
    <li><a href="#ref-for-intrinsic-iteration-duration①⓪">5.4. The AnimationEffectTimingReadOnly interface</a>
    <li><a href="#ref-for-intrinsic-iteration-duration①①">5.11.1. Creating a new KeyframeEffect object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-effect-playback-rate">
   <b><a href="#animation-effect-playback-rate">#animation-effect-playback-rate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-effect-playback-rate">2. Changes since level 1</a>
    <li><a href="#ref-for-animation-effect-playback-rate①">3.2.7. Speed control</a>
    <li><a href="#ref-for-animation-effect-playback-rate②">3.5. Animation effect speed control</a> <a href="#ref-for-animation-effect-playback-rate③">(2)</a> <a href="#ref-for-animation-effect-playback-rate④">(3)</a> <a href="#ref-for-animation-effect-playback-rate⑤">(4)</a> <a href="#ref-for-animation-effect-playback-rate⑥">(5)</a> <a href="#ref-for-animation-effect-playback-rate⑦">(6)</a> <a href="#ref-for-animation-effect-playback-rate⑧">(7)</a> <a href="#ref-for-animation-effect-playback-rate⑨">(8)</a>
    <li><a href="#ref-for-animation-effect-playback-rate①⓪">3.6.1. Overview</a> <a href="#ref-for-animation-effect-playback-rate①①">(2)</a>
    <li><a href="#ref-for-animation-effect-playback-rate①②">3.6.2. Calculating the active duration</a> <a href="#ref-for-animation-effect-playback-rate①③">(2)</a>
    <li><a href="#ref-for-animation-effect-playback-rate①④">3.6.3.2. Calculating the overall progress</a> <a href="#ref-for-animation-effect-playback-rate①⑤">(2)</a> <a href="#ref-for-animation-effect-playback-rate①⑥">(3)</a> <a href="#ref-for-animation-effect-playback-rate①⑦">(4)</a>
    <li><a href="#ref-for-animation-effect-playback-rate①⑧">3.7.1. Calculating the transformed progress</a>
    <li><a href="#ref-for-animation-effect-playback-rate①⑨">3.8.1. Relationship of group time to child time</a>
    <li><a href="#ref-for-animation-effect-playback-rate②⓪">5.4. The AnimationEffectTimingReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="repeated-duration">
   <b><a href="#repeated-duration">#repeated-duration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-repeated-duration">3.6.2. Calculating the active duration</a> <a href="#ref-for-repeated-duration①">(2)</a> <a href="#ref-for-repeated-duration②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="active-duration">
   <b><a href="#active-duration">#active-duration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-duration">3.2. Animations</a>
    <li><a href="#ref-for-active-duration①">3.5. Animation effect speed control</a> <a href="#ref-for-active-duration②">(2)</a> <a href="#ref-for-active-duration③">(3)</a>
    <li><a href="#ref-for-active-duration④">3.6.1. Overview</a> <a href="#ref-for-active-duration⑤">(2)</a> <a href="#ref-for-active-duration⑥">(3)</a>
    <li><a href="#ref-for-active-duration⑦">3.6.2. Calculating the active duration</a>
    <li><a href="#ref-for-active-duration⑧">3.6.3.2. Calculating the overall progress</a>
    <li><a href="#ref-for-active-duration⑨">3.8.4.1. The start time of
  children of a sequence effect</a> <a href="#ref-for-active-duration①⓪">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="transformed-time">
   <b><a href="#transformed-time">#transformed-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transformed-time">3.3.3. Local time and inherited time</a>
    <li><a href="#ref-for-transformed-time①">3.5. Animation effect speed control</a>
    <li><a href="#ref-for-transformed-time②">3.7.2. Calculating the transformed time</a> <a href="#ref-for-transformed-time③">(2)</a>
    <li><a href="#ref-for-transformed-time④">3.8.1. Relationship of group time to child time</a> <a href="#ref-for-transformed-time⑤">(2)</a> <a href="#ref-for-transformed-time⑥">(3)</a> <a href="#ref-for-transformed-time⑦">(4)</a> <a href="#ref-for-transformed-time⑧">(5)</a>
    <li><a href="#ref-for-transformed-time⑨">5.7. The
  ComputedTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="group-effect">
   <b><a href="#group-effect">#group-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-group-effect">2. Changes since level 1</a>
    <li><a href="#ref-for-group-effect①">3.3. Animation effects</a> <a href="#ref-for-group-effect②">(2)</a>
    <li><a href="#ref-for-group-effect③">3.3.1. Types of animation effects</a>
    <li><a href="#ref-for-group-effect④">3.3.3. Local time and inherited time</a>
    <li><a href="#ref-for-group-effect⑤">3.4.1. Iteration intervals</a>
    <li><a href="#ref-for-group-effect⑥">3.7. Time transformations</a>
    <li><a href="#ref-for-group-effect⑦">3.8. Grouping and synchronization</a> <a href="#ref-for-group-effect⑧">(2)</a> <a href="#ref-for-group-effect⑨">(3)</a> <a href="#ref-for-group-effect①⓪">(4)</a> <a href="#ref-for-group-effect①①">(5)</a>
    <li><a href="#ref-for-group-effect①②">3.8.1. Relationship of group time to child time</a> <a href="#ref-for-group-effect①③">(2)</a> <a href="#ref-for-group-effect①④">(3)</a> <a href="#ref-for-group-effect①⑤">(4)</a> <a href="#ref-for-group-effect①⑥">(5)</a> <a href="#ref-for-group-effect①⑦">(6)</a> <a href="#ref-for-group-effect①⑧">(7)</a> <a href="#ref-for-group-effect①⑨">(8)</a> <a href="#ref-for-group-effect②⓪">(9)</a> <a href="#ref-for-group-effect②①">(10)</a>
    <li><a href="#ref-for-group-effect②②">3.8.2. The start time of
  children of a group effect</a> <a href="#ref-for-group-effect②③">(2)</a>
    <li><a href="#ref-for-group-effect②④">3.8.3. The intrinsic
  iteration duration of a group effect</a> <a href="#ref-for-group-effect②⑤">(2)</a>
    <li><a href="#ref-for-group-effect②⑥">3.8.4. Sequence effects</a> <a href="#ref-for-group-effect②⑦">(2)</a> <a href="#ref-for-group-effect②⑧">(3)</a> <a href="#ref-for-group-effect②⑨">(4)</a> <a href="#ref-for-group-effect③⓪">(5)</a> <a href="#ref-for-group-effect③①">(6)</a> <a href="#ref-for-group-effect③②">(7)</a> <a href="#ref-for-group-effect③③">(8)</a> <a href="#ref-for-group-effect③④">(9)</a>
    <li><a href="#ref-for-group-effect③⑤">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-group-effect③⑥">(2)</a> <a href="#ref-for-group-effect③⑦">(3)</a> <a href="#ref-for-group-effect③⑧">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="child-effect">
   <b><a href="#child-effect">#child-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-child-effect">3.8. Grouping and synchronization</a> <a href="#ref-for-child-effect①">(2)</a> <a href="#ref-for-child-effect②">(3)</a>
    <li><a href="#ref-for-child-effect③">3.8.2. The start time of
  children of a group effect</a>
    <li><a href="#ref-for-child-effect④">3.8.3. The intrinsic
  iteration duration of a group effect</a> <a href="#ref-for-child-effect⑤">(2)</a> <a href="#ref-for-child-effect⑥">(3)</a> <a href="#ref-for-child-effect⑦">(4)</a>
    <li><a href="#ref-for-child-effect⑧">3.8.4. Sequence effects</a> <a href="#ref-for-child-effect⑨">(2)</a>
    <li><a href="#ref-for-child-effect①⓪">3.8.4.1. The start time of
  children of a sequence effect</a>
    <li><a href="#ref-for-child-effect①①">3.8.4.2. The intrinsic
  iteration duration of a sequence effect</a> <a href="#ref-for-child-effect①②">(2)</a>
    <li><a href="#ref-for-child-effect①③">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
    <li><a href="#ref-for-child-effect①④">5.8.2. Definitions for manipulating hierarchies</a> <a href="#ref-for-child-effect①⑤">(2)</a> <a href="#ref-for-child-effect①⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="parent-group">
   <b><a href="#parent-group">#parent-group</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parent-group">3.2.2. Setting the target effect of an
  animation</a> <a href="#ref-for-parent-group①">(2)</a>
    <li><a href="#ref-for-parent-group②">3.3. Animation effects</a> <a href="#ref-for-parent-group③">(2)</a>
    <li><a href="#ref-for-parent-group④">3.2. Animations</a> <a href="#ref-for-parent-group⑤">(2)</a> <a href="#ref-for-parent-group⑥">(3)</a>
    <li><a href="#ref-for-parent-group⑦">3.3.3. Local time and inherited time</a> <a href="#ref-for-parent-group⑧">(2)</a> <a href="#ref-for-parent-group⑨">(3)</a>
    <li><a href="#ref-for-parent-group①⓪">3.3.4. Animation effect phases and
states</a> <a href="#ref-for-parent-group①①">(2)</a> <a href="#ref-for-parent-group①②">(3)</a> <a href="#ref-for-parent-group①③">(4)</a>
    <li><a href="#ref-for-parent-group①④">3.6.3.1. Calculating the active time</a> <a href="#ref-for-parent-group①⑤">(2)</a> <a href="#ref-for-parent-group①⑥">(3)</a> <a href="#ref-for-parent-group①⑦">(4)</a> <a href="#ref-for-parent-group①⑧">(5)</a> <a href="#ref-for-parent-group①⑨">(6)</a>
    <li><a href="#ref-for-parent-group②⓪">3.8. Grouping and synchronization</a> <a href="#ref-for-parent-group②①">(2)</a> <a href="#ref-for-parent-group②②">(3)</a>
    <li><a href="#ref-for-parent-group②③">5.3. The AnimationEffectReadOnly interface</a> <a href="#ref-for-parent-group②④">(2)</a> <a href="#ref-for-parent-group②⑤">(3)</a> <a href="#ref-for-parent-group②⑥">(4)</a> <a href="#ref-for-parent-group②⑦">(5)</a> <a href="#ref-for-parent-group②⑧">(6)</a> <a href="#ref-for-parent-group②⑨">(7)</a> <a href="#ref-for-parent-group③⓪">(8)</a>
    <li><a href="#ref-for-parent-group③①">5.7. The
  ComputedTimingProperties dictionary</a> <a href="#ref-for-parent-group③②">(2)</a>
    <li><a href="#ref-for-parent-group③③">5.8.2. Definitions for manipulating hierarchies</a> <a href="#ref-for-parent-group③④">(2)</a> <a href="#ref-for-parent-group③⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="tree-order">
   <b><a href="#tree-order">#tree-order</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-tree-order">4.3.1. The effect stack</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="root">
   <b><a href="#root">#root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-root">3.3. Animation effects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="ancestor">
   <b><a href="#ancestor">#ancestor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ancestor">3.3. Animation effects</a>
    <li><a href="#ref-for-ancestor①">3.3.5. Fill modes</a> <a href="#ref-for-ancestor②">(2)</a> <a href="#ref-for-ancestor③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="descendant">
   <b><a href="#descendant">#descendant</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descendant">3.1.1. Hierarchical</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inclusive-ancestor">
   <b><a href="#inclusive-ancestor">#inclusive-ancestor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inclusive-ancestor">5.3. The AnimationEffectReadOnly interface</a> <a href="#ref-for-inclusive-ancestor①">(2)</a> <a href="#ref-for-inclusive-ancestor②">(3)</a> <a href="#ref-for-inclusive-ancestor③">(4)</a>
    <li><a href="#ref-for-inclusive-ancestor④">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-inclusive-ancestor⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inclusive-descendant">
   <b><a href="#inclusive-descendant">#inclusive-descendant</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inclusive-descendant">3.2.2. Setting the target effect of an
  animation</a>
    <li><a href="#ref-for-inclusive-descendant①">3.2.3. Waiting for the target effect</a>
    <li><a href="#ref-for-inclusive-descendant②">3.2.6. Canceling an animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="next-sibling">
   <b><a href="#next-sibling">#next-sibling</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-next-sibling">5.3. The AnimationEffectReadOnly interface</a>
    <li><a href="#ref-for-next-sibling①">5.8.2. Definitions for manipulating hierarchies</a> <a href="#ref-for-next-sibling②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="previous-sibling">
   <b><a href="#previous-sibling">#previous-sibling</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-previous-sibling">3.8.4.1. The start time of
  children of a sequence effect</a> <a href="#ref-for-previous-sibling①">(2)</a>
    <li><a href="#ref-for-previous-sibling②">5.3. The AnimationEffectReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="first-child">
   <b><a href="#first-child">#first-child</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-first-child">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-first-child①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="last-child">
   <b><a href="#last-child">#last-child</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-last-child">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="sequence-effect">
   <b><a href="#sequence-effect">#sequence-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sequence-effect">2. Changes since level 1</a>
    <li><a href="#ref-for-sequence-effect①">3.3.2. The active interval</a>
    <li><a href="#ref-for-sequence-effect②">3.2. Animations</a>
    <li><a href="#ref-for-sequence-effect③">3.5. Animation effect speed control</a>
    <li><a href="#ref-for-sequence-effect④">3.8.4. Sequence effects</a> <a href="#ref-for-sequence-effect⑤">(2)</a> <a href="#ref-for-sequence-effect⑥">(3)</a> <a href="#ref-for-sequence-effect⑦">(4)</a> <a href="#ref-for-sequence-effect⑧">(5)</a> <a href="#ref-for-sequence-effect⑨">(6)</a>
    <li><a href="#ref-for-sequence-effect①⓪">3.8.4.1. The start time of
  children of a sequence effect</a> <a href="#ref-for-sequence-effect①①">(2)</a> <a href="#ref-for-sequence-effect①②">(3)</a> <a href="#ref-for-sequence-effect①③">(4)</a>
    <li><a href="#ref-for-sequence-effect①④">3.8.4.2. The intrinsic
  iteration duration of a sequence effect</a> <a href="#ref-for-sequence-effect①⑤">(2)</a>
    <li><a href="#ref-for-sequence-effect①⑥">4.1.1. Not animatable</a>
    <li><a href="#ref-for-sequence-effect①⑦">5.4. The AnimationEffectTimingReadOnly interface</a>
    <li><a href="#ref-for-sequence-effect①⑧">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a> <a href="#ref-for-sequence-effect①⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="iteration-composite-operation">
   <b><a href="#iteration-composite-operation">#iteration-composite-operation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-composite-operation">4.2.1. The effect value of a keyframe effect</a>
    <li><a href="#ref-for-iteration-composite-operation①">4.4. Effect accumulation</a> <a href="#ref-for-iteration-composite-operation②">(2)</a>
    <li><a href="#ref-for-iteration-composite-operation③">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a> <a href="#ref-for-iteration-composite-operation④">(2)</a> <a href="#ref-for-iteration-composite-operation⑤">(3)</a>
    <li><a href="#ref-for-iteration-composite-operation⑥">5.11.2. The KeyframeEffectOptions dictionary</a>
    <li><a href="#ref-for-iteration-composite-operation⑦">5.12. The IterationCompositeOperation enumeration</a> <a href="#ref-for-iteration-composite-operation⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="iteration-composite-operation-replace">
   <b><a href="#iteration-composite-operation-replace">#iteration-composite-operation-replace</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-composite-operation-replace">5.12. The IterationCompositeOperation enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="iteration-composite-operation-accumulate">
   <b><a href="#iteration-composite-operation-accumulate">#iteration-composite-operation-accumulate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-composite-operation-accumulate">4.2.1. The effect value of a keyframe effect</a>
    <li><a href="#ref-for-iteration-composite-operation-accumulate①">5.12. The IterationCompositeOperation enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="custom-effect">
   <b><a href="#custom-effect">#custom-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-effect">2. Changes since level 1</a>
    <li><a href="#ref-for-custom-effect①">3.2.1. Setting the timeline of an animation</a>
    <li><a href="#ref-for-custom-effect②">3.2.2. Setting the target effect of an
  animation</a> <a href="#ref-for-custom-effect③">(2)</a>
    <li><a href="#ref-for-custom-effect④">3.2.3. Waiting for the target effect</a>
    <li><a href="#ref-for-custom-effect⑤">3.2.4. Playing an animation</a>
    <li><a href="#ref-for-custom-effect⑥">3.2.5. Pausing an animation</a>
    <li><a href="#ref-for-custom-effect⑦">3.2.6. Canceling an animation</a>
    <li><a href="#ref-for-custom-effect⑧">4.5. Custom effects</a> <a href="#ref-for-custom-effect⑨">(2)</a>
    <li><a href="#ref-for-custom-effect①⓪">4.5.1. Sampling custom effects</a> <a href="#ref-for-custom-effect①①">(2)</a> <a href="#ref-for-custom-effect①②">(3)</a>
    <li><a href="#ref-for-custom-effect①③">4.5.2. Execution order of custom effects</a> <a href="#ref-for-custom-effect①④">(2)</a> <a href="#ref-for-custom-effect①⑤">(3)</a>
    <li><a href="#ref-for-custom-effect①⑥">5.13. The EffectCallback callback function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationtimeline-play">
   <b><a href="#dom-animationtimeline-play">#dom-animationtimeline-play</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationtimeline-play">5.1. The AnimationTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationtimeline-play-effect-effect">
   <b><a href="#dom-animationtimeline-play-effect-effect">#dom-animationtimeline-play-effect-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationtimeline-play-effect-effect">5.1. The AnimationTimeline interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animation-timeline">
   <b><a href="#dom-animation-timeline">#dom-animation-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-timeline">5.2. The Animation interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animationeffectmutable">
   <b><a href="#animationeffectmutable">#animationeffectmutable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationeffectmutable">5.3. The AnimationEffectReadOnly interface</a>
    <li><a href="#ref-for-animationeffectmutable①">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
    <li><a href="#ref-for-animationeffectmutable②">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a>
    <li><a href="#ref-for-animationeffectmutable③">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffectreadonly-parent">
   <b><a href="#dom-animationeffectreadonly-parent">#dom-animationeffectreadonly-parent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffectreadonly-parent">5.3. The AnimationEffectReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffectreadonly-previoussibling">
   <b><a href="#dom-animationeffectreadonly-previoussibling">#dom-animationeffectreadonly-previoussibling</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffectreadonly-previoussibling">5.3. The AnimationEffectReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffectreadonly-nextsibling">
   <b><a href="#dom-animationeffectreadonly-nextsibling">#dom-animationeffectreadonly-nextsibling</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffectreadonly-nextsibling">5.3. The AnimationEffectReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffectmutable-before">
   <b><a href="#dom-animationeffectmutable-before">#dom-animationeffectmutable-before</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffectmutable-before">5.3. The AnimationEffectReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffectmutable-after">
   <b><a href="#dom-animationeffectmutable-after">#dom-animationeffectmutable-after</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffectmutable-after">5.3. The AnimationEffectReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffectmutable-replace">
   <b><a href="#dom-animationeffectmutable-replace">#dom-animationeffectmutable-replace</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffectmutable-replace">5.3. The AnimationEffectReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffectmutable-remove">
   <b><a href="#dom-animationeffectmutable-remove">#dom-animationeffectmutable-remove</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffectmutable-remove">5.3. The AnimationEffectReadOnly interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffecttimingreadonly-playbackrate">
   <b><a href="#dom-animationeffecttimingreadonly-playbackrate">#dom-animationeffecttimingreadonly-playbackrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffecttimingreadonly-playbackrate">5.4. The AnimationEffectTimingReadOnly interface</a>
    <li><a href="#ref-for-dom-animationeffecttimingreadonly-playbackrate①">5.5. The AnimationEffectTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffecttiming-playbackrate">
   <b><a href="#dom-animationeffecttiming-playbackrate">#dom-animationeffecttiming-playbackrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffecttiming-playbackrate">5.5. The AnimationEffectTiming interface</a>
    <li><a href="#ref-for-dom-animationeffecttiming-playbackrate①">5.6. The AnimationEffectTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationeffecttimingproperties-playbackrate">
   <b><a href="#dom-animationeffecttimingproperties-playbackrate">#dom-animationeffecttimingproperties-playbackrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffecttimingproperties-playbackrate">5.6. The AnimationEffectTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-computedtimingproperties-starttime">
   <b><a href="#dom-computedtimingproperties-starttime">#dom-computedtimingproperties-starttime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-computedtimingproperties-starttime">5.7. The
  ComputedTimingProperties dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="groupeffectreadonly">
   <b><a href="#groupeffectreadonly">#groupeffectreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-groupeffectreadonly">5.3. The AnimationEffectReadOnly interface</a> <a href="#ref-for-groupeffectreadonly①">(2)</a>
    <li><a href="#ref-for-groupeffectreadonly②">5.7.1. The FillMode enumeration</a>
    <li><a href="#ref-for-groupeffectreadonly③">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-groupeffectreadonly④">(2)</a> <a href="#ref-for-groupeffectreadonly⑤">(3)</a> <a href="#ref-for-groupeffectreadonly⑥">(4)</a> <a href="#ref-for-groupeffectreadonly⑦">(5)</a> <a href="#ref-for-groupeffectreadonly⑧">(6)</a> <a href="#ref-for-groupeffectreadonly⑨">(7)</a>
    <li><a href="#ref-for-groupeffectreadonly①⓪">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a> <a href="#ref-for-groupeffectreadonly①①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="groupeffectmutable">
   <b><a href="#groupeffectmutable">#groupeffectmutable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-groupeffectmutable">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-groupeffectmutable①">(2)</a>
    <li><a href="#ref-for-groupeffectmutable②">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="groupeffect">
   <b><a href="#groupeffect">#groupeffect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-groupeffect">5.5. The AnimationEffectTiming interface</a>
    <li><a href="#ref-for-groupeffect①">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-groupeffect②">(2)</a> <a href="#ref-for-groupeffect③">(3)</a> <a href="#ref-for-groupeffect④">(4)</a> <a href="#ref-for-groupeffect⑤">(5)</a> <a href="#ref-for-groupeffect⑥">(6)</a> <a href="#ref-for-groupeffect⑦">(7)</a>
    <li><a href="#ref-for-groupeffect⑧">5.15. Model liveness</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffectreadonly-groupeffectreadonly">
   <b><a href="#dom-groupeffectreadonly-groupeffectreadonly">#dom-groupeffectreadonly-groupeffectreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffectreadonly-groupeffectreadonly">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
    <li><a href="#ref-for-dom-groupeffectreadonly-groupeffectreadonly①">5.8.1. Processing a timing argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffectreadonly-groupeffectreadonly-children-timing-children">
   <b><a href="#dom-groupeffectreadonly-groupeffectreadonly-children-timing-children">#dom-groupeffectreadonly-groupeffectreadonly-children-timing-children</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffectreadonly-groupeffectreadonly-children-timing-children">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffectreadonly-groupeffectreadonly-children-timing-timing">
   <b><a href="#dom-groupeffectreadonly-groupeffectreadonly-children-timing-timing">#dom-groupeffectreadonly-groupeffectreadonly-children-timing-timing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffectreadonly-groupeffectreadonly-children-timing-timing">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffect-groupeffect">
   <b><a href="#dom-groupeffect-groupeffect">#dom-groupeffect-groupeffect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffect-groupeffect">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
    <li><a href="#ref-for-dom-groupeffect-groupeffect①">5.8.1. Processing a timing argument</a>
    <li><a href="#ref-for-dom-groupeffect-groupeffect②">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffectreadonly-children">
   <b><a href="#dom-groupeffectreadonly-children">#dom-groupeffectreadonly-children</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffectreadonly-children">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffectreadonly-firstchild">
   <b><a href="#dom-groupeffectreadonly-firstchild">#dom-groupeffectreadonly-firstchild</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffectreadonly-firstchild">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffectreadonly-lastchild">
   <b><a href="#dom-groupeffectreadonly-lastchild">#dom-groupeffectreadonly-lastchild</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffectreadonly-lastchild">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffectmutable-prepend">
   <b><a href="#dom-groupeffectmutable-prepend">#dom-groupeffectmutable-prepend</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffectmutable-prepend">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffectmutable-append">
   <b><a href="#dom-groupeffectmutable-append">#dom-groupeffectmutable-append</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffectmutable-append">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-dom-groupeffectmutable-append①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-groupeffectreadonly-clone">
   <b><a href="#dom-groupeffectreadonly-clone">#dom-groupeffectreadonly-clone</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-groupeffectreadonly-clone">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
    <li><a href="#ref-for-dom-groupeffectreadonly-clone①">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="process-a-timing-argument">
   <b><a href="#process-a-timing-argument">#process-a-timing-argument</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-process-a-timing-argument">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="next-sibling-not-included">
   <b><a href="#next-sibling-not-included">#next-sibling-not-included</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-next-sibling-not-included">5.3. The AnimationEffectReadOnly interface</a> <a href="#ref-for-next-sibling-not-included①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="remove-an-animation-effect">
   <b><a href="#remove-an-animation-effect">#remove-an-animation-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-remove-an-animation-effect">3.2.2. Setting the target effect of an
  animation</a>
    <li><a href="#ref-for-remove-an-animation-effect①">5.3. The AnimationEffectReadOnly interface</a> <a href="#ref-for-remove-an-animation-effect②">(2)</a>
    <li><a href="#ref-for-remove-an-animation-effect③">5.8.2. Definitions for manipulating hierarchies</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="insert-children">
   <b><a href="#insert-children">#insert-children</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-insert-children">5.3. The AnimationEffectReadOnly interface</a> <a href="#ref-for-insert-children①">(2)</a> <a href="#ref-for-insert-children②">(3)</a>
    <li><a href="#ref-for-insert-children③">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-insert-children④">(2)</a> <a href="#ref-for-insert-children⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animationnodelist">
   <b><a href="#animationnodelist">#animationnodelist</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationnodelist">5.8. The GroupEffectReadOnly
  and GroupEffect interfaces</a> <a href="#ref-for-animationnodelist①">(2)</a>
    <li><a href="#ref-for-animationnodelist②">5.9. The AnimationNodeList interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationnodelist-length">
   <b><a href="#dom-animationnodelist-length">#dom-animationnodelist-length</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationnodelist-length">5.9. The AnimationNodeList interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationnodelist-item">
   <b><a href="#dom-animationnodelist-item">#dom-animationnodelist-item</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationnodelist-item">5.9. The AnimationNodeList interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="sequenceeffectreadonly">
   <b><a href="#sequenceeffectreadonly">#sequenceeffectreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sequenceeffectreadonly">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a> <a href="#ref-for-sequenceeffectreadonly①">(2)</a> <a href="#ref-for-sequenceeffectreadonly②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="sequenceeffect">
   <b><a href="#sequenceeffect">#sequenceeffect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sequenceeffect">5.5. The AnimationEffectTiming interface</a>
    <li><a href="#ref-for-sequenceeffect①">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a> <a href="#ref-for-sequenceeffect②">(2)</a> <a href="#ref-for-sequenceeffect③">(3)</a> <a href="#ref-for-sequenceeffect④">(4)</a> <a href="#ref-for-sequenceeffect⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-sequenceeffect-sequenceeffect">
   <b><a href="#dom-sequenceeffect-sequenceeffect">#dom-sequenceeffect-sequenceeffect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-sequenceeffect-sequenceeffect">5.8.1. Processing a timing argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-sequenceeffectreadonly-sequenceeffectreadonly">
   <b><a href="#dom-sequenceeffectreadonly-sequenceeffectreadonly">#dom-sequenceeffectreadonly-sequenceeffectreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-sequenceeffectreadonly-sequenceeffectreadonly">5.8.1. Processing a timing argument</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-sequenceeffectreadonly-clone">
   <b><a href="#dom-sequenceeffectreadonly-clone">#dom-sequenceeffectreadonly-clone</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-sequenceeffectreadonly-clone">5.10. The
SequenceEffectReadOnly and SequenceEffect
interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffect-iterationcomposite">
   <b><a href="#dom-keyframeeffect-iterationcomposite">#dom-keyframeeffect-iterationcomposite</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffect-iterationcomposite">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a> <a href="#ref-for-dom-keyframeeffect-iterationcomposite①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-keyframeeffectoptions-iterationcomposite">
   <b><a href="#dom-keyframeeffectoptions-iterationcomposite">#dom-keyframeeffectoptions-iterationcomposite</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-keyframeeffectoptions-iterationcomposite">5.11.2. The KeyframeEffectOptions dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="iterationcompositeoperation">
   <b><a href="#iterationcompositeoperation">#iterationcompositeoperation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iterationcompositeoperation">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-iterationcompositeoperation">
   <b><a href="#enumdef-iterationcompositeoperation">#enumdef-iterationcompositeoperation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-iterationcompositeoperation">5.11. The KeyframeEffectReadOnly
  and KeyframeEffect interfaces</a> <a href="#ref-for-enumdef-iterationcompositeoperation①">(2)</a>
    <li><a href="#ref-for-enumdef-iterationcompositeoperation②">5.11.2. The KeyframeEffectOptions dictionary</a> <a href="#ref-for-enumdef-iterationcompositeoperation③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-effectcallback">
   <b><a href="#callbackdef-effectcallback">#callbackdef-effectcallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-effectcallback">5.13. The EffectCallback callback function</a> <a href="#ref-for-callbackdef-effectcallback①">(2)</a>
    <li><a href="#ref-for-callbackdef-effectcallback②">5.15. Model liveness</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>